代码合并
This commit is contained in:
commit
94cc918357
114
App.vue
114
App.vue
|
|
@ -6,72 +6,76 @@
|
|||
APIgeocodelocation
|
||||
} from "@/common/api/api.js"
|
||||
import {
|
||||
onLaunch
|
||||
onLaunch,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
getCurrentInstance,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
import {
|
||||
Storelogin
|
||||
} from '@/stores/user.js';
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 小程序启动时执行
|
||||
onLaunch(async () => {
|
||||
// 标记应用启动完成
|
||||
// clear
|
||||
await nextTick()
|
||||
const store = useNavbarStore();
|
||||
store.initNavbarHeight();
|
||||
try {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: async (res) => {
|
||||
let successres = await APIgeocodelocation({
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
})
|
||||
if (successres.code == 0) {
|
||||
let datastorage = {
|
||||
country: successres.data.addressComponent.country, // "中国"
|
||||
province: successres.data.addressComponent
|
||||
.province, //province: "陕西省"
|
||||
address: successres.data.addressComponent.city, //district: "西安市"
|
||||
district: successres.data.addressComponent
|
||||
.district, //district: "未央区"
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
}
|
||||
uni.cache.set('getLocationstorage', datastorage);
|
||||
proxy.$isResolve()
|
||||
}
|
||||
},
|
||||
await store.initNavbarHeight();
|
||||
|
||||
});
|
||||
} catch (error) {
|
||||
let successres = await APIgeocodelocation({
|
||||
lng: '',
|
||||
lat: '',
|
||||
})
|
||||
if (successres.code == 0) {
|
||||
let datastorage = {
|
||||
country: successres.data.addressComponent.country, // "中国"
|
||||
province: successres.data.addressComponent
|
||||
.province, //province: "陕西省"
|
||||
address: successres.data.addressComponent.city, //district: "西安市"
|
||||
district: successres.data.addressComponent
|
||||
.district, //district: "未央区"
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
}
|
||||
uni.cache.set('getLocationstorage', datastorage);
|
||||
proxy.$isResolve()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// export default {
|
||||
// onLaunch: async function() {
|
||||
|
||||
|
||||
// },
|
||||
// onShow: function() {},
|
||||
onShow(async () => {
|
||||
try {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 当向小程序后台请求完新版本信息,会进行回调。res: {hasUpdate: true, version: 1.0.0}
|
||||
const updateManager = uni.getUpdateManager();
|
||||
updateManager.onCheckForUpdate((res) => {
|
||||
if (res.hasUpdate) { // 有更新
|
||||
uni.showLoading({
|
||||
title: '更新中...'
|
||||
}); // 开始下载前,显示Loading
|
||||
}
|
||||
});
|
||||
// 当新版本下载完成,会进行回调
|
||||
updateManager.onUpdateReady(() => {
|
||||
uni.hideLoading(); // 关闭 Loading
|
||||
uni.showModal({ // 弹确认框(强制更新)
|
||||
title: '更新提示',
|
||||
content: '更新完毕,是否重启?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
updateManager.applyUpdate(); // 强制小程序重启并使用新版本。
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
// 当新版本下载失败,会进行回调
|
||||
updateManager.onUpdateFailed(() => {
|
||||
uni.hideLoading(); // 关闭 Loading
|
||||
uni.showToast({
|
||||
title: '更新失败,稍后再试...',
|
||||
icon: "error"
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
// #ifndef H5
|
||||
// try {
|
||||
const storelogin = Storelogin();
|
||||
await storelogin.actionslogin()
|
||||
proxy.$isResolve()
|
||||
// } catch (error) {
|
||||
// proxy.$isResolve()
|
||||
// console.log(error)
|
||||
// }
|
||||
// #endif
|
||||
})
|
||||
// onHide: function() {}
|
||||
// }
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,68 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
|
||||
const url = '/account'
|
||||
//根据经纬度获取信息
|
||||
export const APIgeocodelocation = (data) => {
|
||||
return request({
|
||||
url: '/location/geocode',
|
||||
url: url + '/user/geo/geocode',
|
||||
method: 'get',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
//根据经纬度获取信息
|
||||
export const APIcustomlogin = (data) => {
|
||||
|
||||
//登录
|
||||
export const APIuserlogin = (data) => {
|
||||
return request({
|
||||
url: '/login/auth/custom/login',
|
||||
url: url + '/user/login',
|
||||
method: 'post',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
||||
//用户信息获取
|
||||
export const APIuser = (data) => {
|
||||
return request({
|
||||
url: url + '/user',
|
||||
method: 'get',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
||||
//获取手机号
|
||||
export const APIuserphone = (data) => {
|
||||
return request({
|
||||
url: url + '/user/phone',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//文件上传
|
||||
export const APIuserupload = (data) => {
|
||||
return request({
|
||||
url: url + '/user/common/upload',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//用户密码修改
|
||||
export const APIuserpwd = (data) => {
|
||||
return request({
|
||||
url: url + '/user/pwd',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//验证码获取
|
||||
export const APIusercode = (data) => {
|
||||
return request({
|
||||
url: url + '/user/code',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
//获取优惠券参数列表
|
||||
const url = '/account'
|
||||
export const APIordergetYhqPara = (data) => {
|
||||
return request({
|
||||
url: '/order/getYhqPara',
|
||||
url: url + '/order/getYhqPara',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
|
|
@ -11,7 +12,7 @@ export const APIordergetYhqPara = (data) => {
|
|||
//系统优惠券
|
||||
export const APIorderfindCoupons = (data) => {
|
||||
return request({
|
||||
url: '/order/findCoupons',
|
||||
url: url + '/order/findCoupons',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
|
|
@ -19,7 +20,7 @@ export const APIorderfindCoupons = (data) => {
|
|||
// 我的优惠券
|
||||
export const APIordermineCoupons = (data) => {
|
||||
return request({
|
||||
url: '/order/mineCoupons',
|
||||
url: url + '/order/mineCoupons',
|
||||
method: 'post',
|
||||
data: data,
|
||||
toast: false
|
||||
|
|
|
|||
|
|
@ -1,46 +1,30 @@
|
|||
// 引入 request 文件
|
||||
const url = '/product'
|
||||
// const url = '/account'
|
||||
import request from '@/common/api/request.js'
|
||||
//首页上半部分
|
||||
export const APIhomehomePageUp = (data) => {
|
||||
return request({
|
||||
url: '/home/homePageUp',
|
||||
method: 'post',
|
||||
url: url + '/user/home/homePageUp',
|
||||
method: 'GET',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
//首页上半部分
|
||||
//首页xia半部分
|
||||
export const APIhome = (data) => {
|
||||
return request({
|
||||
url: '/home',
|
||||
method: 'post',
|
||||
url: url + '/user/home/product',
|
||||
method: 'GET',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
//首页上半部分
|
||||
export const APIshopUserInfo = (data) => {
|
||||
// 获取咖啡
|
||||
export const userdict = (data) => {
|
||||
return request({
|
||||
url: '/user/shopUserInfo',
|
||||
method: 'get',
|
||||
url: '/account/user/dict',
|
||||
method: 'GET',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
//首页上半部分
|
||||
export const APIgeocodelocation = (data) => {
|
||||
return request({
|
||||
url: '/location/geocode',
|
||||
method: 'get',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
///商户登录后 shopId和autokey
|
||||
export const APIshopExtend = (data) => {
|
||||
return request({
|
||||
url: '/common/shopExtend',
|
||||
method: 'post',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const url = '/account'
|
||||
//获取top部分(店铺列表)
|
||||
export const APIdistiricttopCommon = (data) => {
|
||||
return request({
|
||||
url: '/distirict/topCommon',
|
||||
url: url + '/distirict/topCommon',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
|
|
@ -11,7 +12,7 @@ export const APIdistiricttopCommon = (data) => {
|
|||
//预约到店(店铺列表)
|
||||
export const APIdistirictsubShopList = (data) => {
|
||||
return request({
|
||||
url: '/distirict/subShopList',
|
||||
url: url + '/user/shopInfo/subList',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const urlAccount = '/account'
|
||||
const urlProduct = '/product'
|
||||
const urlOrder = '/order'
|
||||
|
||||
//桌码换取详细店铺信息
|
||||
export const APIproductqueryShop = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopInfo',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取登录用户店铺会员信息
|
||||
export const APIshopUserInfo = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser',
|
||||
method: 'get',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
||||
// 加入会员
|
||||
export const APIshopUser = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取动态会员码 3分钟内可用
|
||||
export const APIusershopUsercode = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser/code',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前用户所有店铺会员信息 列表
|
||||
export const APIusershopUservipCard = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser/vipCard',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取店铺详细信息
|
||||
export const APIusershopInfodetail = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopInfo/detail',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//通过用户Id 查找优惠券
|
||||
export const APIcouponfindByUserId = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/coupon/findByUserId',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
//生成订单后使用
|
||||
export const APIfindCoupon = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/coupon/findCoupon',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//桌码换取详细店铺信息
|
||||
export const APIuseractivate = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/activate',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//获取余额余额明细
|
||||
export const APIshopUsermoneyRecord = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser/moneyRecord',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//获取积分明细
|
||||
export const APIshopUserpointsRecord = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser/pointsRecord',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//获取动态会员码
|
||||
export const APIshopUsercode = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/shopUser/code',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const url = '/order'
|
||||
//订单列表
|
||||
export const APIuserorder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//生成订单
|
||||
export const APIcreateOrder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/createOrder',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//删除订单
|
||||
export const APIputuserorder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/' + data,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
//历史订单(多次下单使用)
|
||||
export const APIhistoryOrder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/historyOrder',
|
||||
method: 'get',
|
||||
data: data,
|
||||
toast: false
|
||||
})
|
||||
}
|
||||
|
||||
//订单详情
|
||||
export const APIgetOrderById = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/getOrderById',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//删除所有待支付订单
|
||||
export const APIcancelOrder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/cancelOrder',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//删除某一个待支付订单
|
||||
export const APIrmPlaceOrder = (data) => {
|
||||
return request({
|
||||
url: url + '/user/order/rmPlaceOrder',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const urlAccount = '/account'
|
||||
const urlProduct = '/product'
|
||||
const urlOrder = '/order'
|
||||
|
||||
// 小程序会员充值支付
|
||||
export const APIpayltPayVip = (data) => {
|
||||
return request({
|
||||
url: urlOrder + '/pay/ltPayVip',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 小程序支付
|
||||
export const APIpayltPayOrder = (data) => {
|
||||
return request({
|
||||
url: urlOrder + '/pay/ltPayOrder',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 会员退款
|
||||
export const APIrefundVip = (data) => {
|
||||
return request({
|
||||
url: urlOrder + '/pay/vipPay',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -1,10 +1,48 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const urlAccount = '/account'
|
||||
const urlProduct = '/product'
|
||||
const urlOrder = '/order'
|
||||
|
||||
//通过桌码获取店铺信息
|
||||
export const APIproductqueryShop = (data) => {
|
||||
//获取商品列表数据
|
||||
export const APIproductqueryProduct = (data) => {
|
||||
return request({
|
||||
url: '/product/queryShop',
|
||||
url: urlProduct + '/user/product/miniApp/home/queryProduct',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//小程序点餐-热销商品查询
|
||||
export const productminiApphotsquery = (data) => {
|
||||
return request({
|
||||
url: urlProduct + '/user/product/miniApp/hots/query',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//小程序点餐-分组商品列表
|
||||
export const APIgroupquery = (data) => {
|
||||
return request({
|
||||
url: urlProduct + '/user/product/miniApp/group/query',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//小程序点餐-分组商品列表
|
||||
export const APIminiAppinfo = (data) => {
|
||||
return request({
|
||||
url: urlProduct + '/user/product/miniApp/info/' + data,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//小程序点餐-分组商品列表
|
||||
export const APIminiAppskuinfo = (data) => {
|
||||
return request({
|
||||
url: urlProduct + '/user/product/miniApp/sku/info',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,22 +8,21 @@ export default (params) => {
|
|||
version: uni.conf.version,
|
||||
type: uni.getSystemInfoSync().platform,
|
||||
// #ifdef APP-PLUS
|
||||
environment: 'app',
|
||||
platformType: 'APP',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
environment: 'H5',
|
||||
platformType: 'H5',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
environment: 'wx',
|
||||
platformType: 'WX',
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
environment: 'alipay',
|
||||
platformType: 'ALI',
|
||||
// #endif
|
||||
token: uni.cache.get('token'),
|
||||
openId: uni.cache.get('miniAppOpenId'),
|
||||
id: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopId'),
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
token: uni.cache.get('token') || '',
|
||||
id: uni.cache.get('userInfo').id || '',
|
||||
shopId: uni.cache.get('shopId') || '',
|
||||
userId: uni.cache.get('userInfo').id || '',
|
||||
}
|
||||
if (toast) {
|
||||
uni.showLoading({
|
||||
|
|
@ -32,34 +31,37 @@ export default (params) => {
|
|||
})
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeoutDuration = params.timeout || 10000; // 可以通过 params 传入超时时间,默认 10 秒
|
||||
uni.request({
|
||||
url: uni.conf.baseUrl + url,
|
||||
method: method,
|
||||
header: header,
|
||||
data: data,
|
||||
timeout: timeoutDuration,
|
||||
success(response) {
|
||||
const res = response.data
|
||||
// 根据返回的状态码做出对应的操作
|
||||
//获取成功
|
||||
if (res.code == 0) {
|
||||
if (res.code == 200) {
|
||||
uni.hideLoading();
|
||||
uni.hideToast();
|
||||
resolve(res);
|
||||
resolve(res.data ? res.data : true);
|
||||
} else {
|
||||
switch (res.code) {
|
||||
case '-4':
|
||||
resolve(res)
|
||||
case '501':
|
||||
uni.cache.remove('shopId')
|
||||
// uni.showToast({
|
||||
// title: res.message || res.msg || res.error,
|
||||
// title: '',
|
||||
// icon: "none",
|
||||
// success: () => {
|
||||
// setTimeout(() => {
|
||||
// uni.reLaunch({
|
||||
// url: "/pages/login/index",
|
||||
// })
|
||||
// }, 1000);
|
||||
|
||||
// }
|
||||
// })
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/index/index",
|
||||
})
|
||||
}, 1000);
|
||||
break;
|
||||
case 404:
|
||||
uni.showToast({
|
||||
|
|
@ -69,15 +71,14 @@ export default (params) => {
|
|||
break;
|
||||
default:
|
||||
// 是否提示
|
||||
console.log(res)
|
||||
if (toast) {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg || res.error,
|
||||
icon: "none",
|
||||
success: () => {
|
||||
setTimeout(res => {
|
||||
|
||||
}, 2000)
|
||||
reject(false);
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -86,21 +87,18 @@ export default (params) => {
|
|||
}
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err)
|
||||
if (err.errMsg.indexOf('request:fail') !== -1) {
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
icon: "error",
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未知异常',
|
||||
duration: 2000
|
||||
})
|
||||
if (err.errMsg.indexOf('timeout') !== -1) {
|
||||
if (toast) {
|
||||
uni.showToast({
|
||||
title: `请求超时,请稍后重试`,
|
||||
icon: "error",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
reject(err);
|
||||
|
||||
},
|
||||
complete() {
|
||||
// 不管成功还是失败都会执行
|
||||
|
|
@ -111,5 +109,6 @@ export default (params) => {
|
|||
|
||||
}
|
||||
});
|
||||
}).catch((e) => {});
|
||||
}).catch((e) => {
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const urlAccount = '/account'
|
||||
const urlProduct = '/product'
|
||||
const urlOrder = '/order'
|
||||
|
||||
//商品列表
|
||||
export const APIgeocodelocation = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/points/mall/goods/page',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//001-会员积分账户信息
|
||||
export const APImemberPointsmyPoints = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/points/memberPoints/myPoints',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//002-获取订单可用积分及抵扣金额(支付页面使用)
|
||||
export const APImemberPointscalcUsablePoints = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/points/memberPoints/calcUsablePoints',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
//003-根据积分计算可抵扣金额
|
||||
export const APImemberPointscalcDeductionAmount = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/points/memberPoints/calcDeductionAmount',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/common/api/request.js'
|
||||
const urlAccount = '/account'
|
||||
const urlProduct = '/product'
|
||||
const urlOrder = '/order'
|
||||
|
||||
// 获取叫号号码
|
||||
export const APIcallTabletakeNumber = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable/takeNumber',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 叫号桌型获取
|
||||
export const APIusercallTable = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取叫号队列
|
||||
export const APIqueuecallTable = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable/queue',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 叫号队列详情
|
||||
export const APIqueuedetail = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable/queue/detail',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 消息订阅
|
||||
export const APIcallTablesubMsg = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable/subMsg',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 取消排队
|
||||
export const APIqueuecancel = (data) => {
|
||||
return request({
|
||||
url: urlAccount + '/user/callTable/cancel?queueId=' + data.queueId + '&shopId=' + data.shopId,
|
||||
method: 'DELETE'
|
||||
})
|
||||
}
|
||||
1437
common/js/uqrCode.js
1437
common/js/uqrCode.js
File diff suppressed because it is too large
Load Diff
|
|
@ -1,231 +1,350 @@
|
|||
class webSocketUtils {
|
||||
constructor(url, time, params) {
|
||||
this.socketTask = null;
|
||||
this.is_open_socket = false; //避免重复连接
|
||||
this.url = url;
|
||||
this.params = params ? params : null; ////是否初始化请求
|
||||
this.connectNum = 1; // 重连次数
|
||||
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法,导致重连定时器出问题
|
||||
//连接并打开之后可重连,且只执行重连方法一次
|
||||
this.canReconnect = false; // 是否可以重连
|
||||
//心跳检测
|
||||
this.timeout = time ? time : 5000; //多少秒执行检测
|
||||
this.heartbeatInterval = null; //检测服务器端是否还活着
|
||||
this.reconnectTimeOut = null; //重连之后多久再次重连
|
||||
try {
|
||||
|
||||
return this.connectSocketInit({
|
||||
data: this.params,
|
||||
type: 'connectSocketInit',
|
||||
});
|
||||
} catch (e) {
|
||||
// console.log('catch');
|
||||
this.reconnect();
|
||||
}
|
||||
}
|
||||
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
||||
connectSocketInit(data) {
|
||||
let _this = this;
|
||||
this.data = data;
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask = uni.connectSocket({
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.connectSocket({
|
||||
// #endif
|
||||
url: this.url,
|
||||
success: (res) => {
|
||||
console.log('创建websocketc成功...');
|
||||
// uni.hideLoading();
|
||||
// 返回实例
|
||||
return this.socketTask;
|
||||
},
|
||||
fail: (res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onOpen((res) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketOpen((res) => {
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
this.connectNum = 1;
|
||||
console.log('WebSocket连接正常!==',res);
|
||||
if (this.params) { //是否初始化请求
|
||||
this.send(this.params);
|
||||
}
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
clearInterval(this.heartbeatInterval);
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = true;
|
||||
this.start();
|
||||
// 注:只有连接正常打开中 ,才能正常收到消息
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onMessage((e) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketMessage((e)=>{
|
||||
// #endif
|
||||
// 字符串转json
|
||||
let res = JSON.parse(e.data);
|
||||
uni.$emit('message', res)
|
||||
// 普通socket信息处理 TODO
|
||||
});
|
||||
});
|
||||
|
||||
// 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.onSocketError((res) => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketError((res) => {
|
||||
// #endif
|
||||
console.log('网络断开,请检查!');
|
||||
this.socketTask = null;
|
||||
this.is_open_socket = false;
|
||||
// this.Close()
|
||||
this.canReconnect = true;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
try {
|
||||
if (this.connectNum <= 10) {
|
||||
// uni.showLoading({
|
||||
// title: `网络连接失败,正尝试第${this.connectNum}次连接`,
|
||||
// mask: true
|
||||
// })
|
||||
uni.$emit('message', 1) //进行重连
|
||||
uni.showToast({
|
||||
title: `网络连接失败,正尝试第${this.connectNum}次连接`,
|
||||
icon: 'none',
|
||||
});
|
||||
this.reconnect();
|
||||
this.connectNum += 1;
|
||||
} else {
|
||||
// uni.$emit('connectError');
|
||||
uni.showToast({
|
||||
title: `网络连接失败,请检查网络!`,
|
||||
icon: 'none',
|
||||
});
|
||||
this.connectNum = 1;
|
||||
this.canReconnect = false;
|
||||
this.Close()
|
||||
setTimeout(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onBeforeUnmount
|
||||
} from 'vue';
|
||||
|
||||
const useWebSocket = (options = {}) => {
|
||||
const {
|
||||
heartbeatInterval = 10000, //心跳是10秒一次
|
||||
reconnectInterval = 3000, //重新连接间隔时间的一个参数
|
||||
maxReconnectAttempts = 3, //最大重连接次数
|
||||
initialReconnectInterval = 3000, // 初始重连间隔
|
||||
initMessage,
|
||||
initMessageRetryCount = 3, // 新增:初始化消息发送重试次数
|
||||
initMessageRetryInterval = 2000, // 新增:初始化消息重试间隔
|
||||
maxReconnectDuration = Infinity
|
||||
} = options;
|
||||
|
||||
const autoReconnect = ref(true); //是否自动重新连接
|
||||
const socketTask = ref(null);
|
||||
const isConnected = ref(false); //表示是否已连接上。
|
||||
const heartbeatTimer = ref(null); //心跳定时器
|
||||
const reconnectTimer = ref(null); //重连定时器
|
||||
const reconnectAttempts = ref(0); //重连的尝试次数
|
||||
const isNetworkConnected = ref(true); //监听当前网络连接状态
|
||||
const isManuallyClosed = ref(false); //是否是被手动关闭的
|
||||
const receivedMessages = ref(); //储从 WebSocket 服务器接收到的消息
|
||||
const initMessageSendAttempts = ref(0); //初始化连接多少次
|
||||
const reconnectStartTime = ref(0); //新增:记录重连开始时间
|
||||
const isPongReceived = ref(false)
|
||||
const allowReconnect = ref(true); // 新增:控制是否允许重连
|
||||
// 关闭现有连接并清理资源
|
||||
const closeExistingConnection = () => {
|
||||
if (socketTask.value) {
|
||||
// 关闭 WebSocket 连接
|
||||
socketTask.value.close({
|
||||
success: () => {
|
||||
console.log('WebSocket 连接已关闭');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('关闭 WebSocket 连接失败:', err);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
});
|
||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||||
// #ifdef MP-WEIXIN
|
||||
this.socketTask.onClose(() => {
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.onSocketClose((res) => {
|
||||
// #endif
|
||||
console.log("socket关闭了")
|
||||
this.socketTask = null;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序的ws连接问题,关闭连接时需关闭对于接受,防止关闭失败
|
||||
my.offSocketMessage();
|
||||
my.offSocketError();
|
||||
my.offSocketOpen();
|
||||
my.offSocketClose();
|
||||
// #endif
|
||||
this.is_open_socket = false;
|
||||
if (this.canReconnect) {
|
||||
this.reconnect();
|
||||
this.canReconnect = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 主动关闭socket连接
|
||||
Close() {
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = false;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.socketTask) {
|
||||
this.socketTask.close({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
},
|
||||
});
|
||||
|
||||
// 清除心跳定时器
|
||||
clearInterval(heartbeatTimer.value);
|
||||
heartbeatTimer.value = null;
|
||||
|
||||
// 清除重连定时器
|
||||
clearTimeout(reconnectTimer.value);
|
||||
reconnectTimer.value = null;
|
||||
|
||||
// 标记连接已断开
|
||||
isConnected.value = false;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.closeSocket({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序的ws连接问题,关闭连接时需关闭对于接受,防止关闭失败
|
||||
my.offSocketMessage();
|
||||
my.offSocketError();
|
||||
my.offSocketOpen();
|
||||
my.offSocketClose();
|
||||
// #endif
|
||||
|
||||
};
|
||||
|
||||
// 连接 WebSocket
|
||||
const connect = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
uni.showToast({
|
||||
title: '网络未连接...',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index')
|
||||
}, 1000)
|
||||
console.log('网络未连接,暂不尝试连接 WebSocket');
|
||||
return;
|
||||
}
|
||||
|
||||
// 关闭现有连接并清理资源
|
||||
closeExistingConnection();
|
||||
|
||||
socketTask.value = uni.connectSocket({
|
||||
url: uni.conf.baseUrlwws,
|
||||
success: (res) => {
|
||||
isConnected.value = true;
|
||||
// 监听初始化成功在开启心跳
|
||||
startHeartbeat();
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('手动关闭失败==',res);
|
||||
fail: () => {
|
||||
console.error('WebSocket 连接失败,尝试重连');
|
||||
if (autoReconnect.value && allowReconnect.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
//发送消息
|
||||
send(data) {
|
||||
// console.log("发送消息---------->", data);
|
||||
// 注:只有连接正常打开中 ,才能正常成功发送消息
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.socketTask) {
|
||||
this.socketTask.send({
|
||||
|
||||
if (socketTask.value) {
|
||||
socketTask.value.onOpen(() => {
|
||||
// 初始化 初始购物车
|
||||
sendMessage(initMessage)
|
||||
});
|
||||
socketTask.value.onMessage((res) => {
|
||||
receivedMessages.value = JSON.parse(res.data)
|
||||
// receivedMessages.value.push(list);
|
||||
if (receivedMessages.value == 'ok' || receivedMessages.value.operate_type == 'init') {
|
||||
console.log('初始化正常,心跳响应正常');
|
||||
// 清除重连定时器
|
||||
clearTimeout(reconnectTimer.value);
|
||||
allowReconnect.value = false
|
||||
reconnectTimer.value = null;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
socketTask.value.onClose((res) => {
|
||||
console.log(res, 'WebSocket 连接已关闭,尝试重连');
|
||||
isConnected.value = false;
|
||||
clearInterval(heartbeatTimer.value); // 停止心跳定时器
|
||||
clearTimeout(reconnectTimer.value); // 清除重连定时器
|
||||
if (res.code == '1006' && !allowReconnect.value) {
|
||||
uni.showToast({
|
||||
title: '网络异常,请重新扫码',
|
||||
icon: 'none'
|
||||
});
|
||||
autoReconnect.value = false;
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index');
|
||||
}, 1000)
|
||||
return false;
|
||||
}
|
||||
if (autoReconnect.value && !isManuallyClosed.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
});
|
||||
|
||||
socketTask.value.onError((err) => {
|
||||
console.error('WebSocket 连接发生错误:', err);
|
||||
isConnected.value = false;
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect.value && !isManuallyClosed.value) {
|
||||
handleReconnect();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('socketTask 未正确初始化');
|
||||
}
|
||||
};
|
||||
|
||||
// 启动心跳机制
|
||||
const startHeartbeat = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('网络未连接,暂停心跳');
|
||||
uni.showToast({
|
||||
title: '网络未连接...',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index');
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
heartbeatTimer.value = setInterval(() => {
|
||||
if (isConnected.value) {
|
||||
console.log('发送心跳消息');
|
||||
isPongReceived.value = false; // 每次发送心跳消息前重置标记
|
||||
socketTask.value.send({
|
||||
data: JSON.stringify({
|
||||
type: 'ping_interval',
|
||||
set: 'shopping'
|
||||
}),
|
||||
success: () => {
|
||||
console.log('心跳消息发送成功');
|
||||
const pongTimer = setTimeout(() => {
|
||||
if (!isPongReceived.value) {
|
||||
console.error('心跳超时,未收到响应,尝试重连');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect.value && reconnectAttempts.value <
|
||||
maxReconnectAttempts && allowReconnect.value) {
|
||||
handleReconnect();
|
||||
} else {
|
||||
console.error('重连次数达到上限,停止重连和心跳');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
autoReconnect.value = false;
|
||||
uni.pro.switchTab('index/index');
|
||||
}
|
||||
}
|
||||
}, heartbeatInterval * 1.2);
|
||||
|
||||
const handlePong = (res) => {
|
||||
try {
|
||||
let data = JSON.parse(res.data);
|
||||
if (data.operate_type == "init" || (data.msg === 'ok' &&
|
||||
data.msg_id ==
|
||||
'ping_interval')) {
|
||||
isPongReceived.value = true;
|
||||
console.log('收到心跳响应,清除超时定时器');
|
||||
clearTimeout(pongTimer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析心跳响应数据时出错:', error);
|
||||
}
|
||||
};
|
||||
socketTask.value.onMessage(handlePong);
|
||||
},
|
||||
fail: () => {
|
||||
console.error('心跳消息发送失败,尝试重连');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
if (autoReconnect.value && reconnectAttempts.value <
|
||||
maxReconnectAttempts && allowReconnect.value) {
|
||||
handleReconnect();
|
||||
} else {
|
||||
console.error('重连次数达到上限,停止重连和心跳');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
autoReconnect.value = false;
|
||||
uni.pro.switchTab('index/index');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, heartbeatInterval);
|
||||
};
|
||||
|
||||
|
||||
// 手动关闭连接
|
||||
const closeSocket = () => {
|
||||
isManuallyClosed.value = true;
|
||||
closeExistingConnection();
|
||||
};
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = async (data) => {
|
||||
if (isConnected.value) {
|
||||
await socketTask.value.send({
|
||||
data: JSON.stringify(data),
|
||||
async success() {
|
||||
// console.log("消息发送成功");
|
||||
success: () => {
|
||||
// console.log('消息发送成功');
|
||||
},
|
||||
fail: () => {
|
||||
// console.error('消息发送失败');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('WebSocket 未连接,无法发送消息');
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.sendSocketMessage({
|
||||
data: JSON.stringify(data),
|
||||
success(res) {
|
||||
// console.log("消息发送成功");
|
||||
};
|
||||
|
||||
// 处理重连逻辑
|
||||
const handleReconnect = () => {
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('网络未连接,暂停重连');
|
||||
return;
|
||||
}
|
||||
if (isManuallyClosed.value) {
|
||||
console.log('手动关闭连接,不进行重连');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!allowReconnect.value) {
|
||||
console.log('重连功能已关闭,不进行重连');
|
||||
return;
|
||||
}
|
||||
|
||||
if (reconnectAttempts.value < maxReconnectAttempts) {
|
||||
reconnectAttempts.value++;
|
||||
const reconnectInterval = initialReconnectInterval * Math.pow(2, reconnectAttempts.value - 1);
|
||||
const randomizedInterval = reconnectInterval + Math.floor(Math.random() * 1000);
|
||||
uni.showLoading({
|
||||
title: `正在努力连接..`,
|
||||
mask: true
|
||||
})
|
||||
console.log(`尝试第 ${reconnectAttempts.value} 次重连,重连间隔: ${randomizedInterval}ms...`);
|
||||
|
||||
reconnectTimer.value = setTimeout(() => {
|
||||
connect();
|
||||
}, randomizedInterval);
|
||||
} else {
|
||||
console.error('重连次数达到上限,停止重连');
|
||||
uni.showToast({
|
||||
title: '重连次数达到上限,停止重连',
|
||||
icon: 'none'
|
||||
});
|
||||
clearInterval(heartbeatTimer.value);
|
||||
autoReconnect.value = false;
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.pro.switchTab('index/index');
|
||||
}, 1000)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// / 网络状态监听
|
||||
const initNetworkListener = () => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
if (res.platform !== 'devtools') {
|
||||
uni.onNetworkStatusChange((statusRes) => {
|
||||
isNetworkConnected.value = statusRes.isConnected;
|
||||
if (statusRes.isConnected && !isManuallyClosed.value) {
|
||||
console.log('网络已连接,尝试重新连接 WebSocket');
|
||||
if (!isConnected.value && autoReconnect.value) {
|
||||
connect();
|
||||
}
|
||||
} else if (!statusRes.isConnected) {
|
||||
console.log('网络已断开,暂停 WebSocket 操作');
|
||||
clearInterval(heartbeatTimer.value);
|
||||
clearTimeout(reconnectTimer.value);
|
||||
if (socketTask.value) {
|
||||
socketTask.value.close();
|
||||
isConnected.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取系统信息失败:', err);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
//开启心跳检测
|
||||
start(data) {
|
||||
// console.log('开启心跳检测', data)
|
||||
this.heartbeatInterval = setInterval(() => {
|
||||
this.send({
|
||||
data: '心跳检测',
|
||||
type: 'heartbeat',
|
||||
});
|
||||
}, this.timeout);
|
||||
}
|
||||
//重新连接
|
||||
reconnect() {
|
||||
//停止发送心跳
|
||||
clearInterval(this.heartbeatInterval);
|
||||
//如果不是人为关闭的话,进行重连
|
||||
if (!this.is_open_socket) {
|
||||
console.log('进行重连');
|
||||
this.canReconnect = true;
|
||||
this.reconnectTimeOut = setInterval(() => {
|
||||
this.connectSocketInit(this.data);
|
||||
}, this.timeout);
|
||||
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
isNetworkConnected.value = res.networkType !== 'none';
|
||||
if (!isNetworkConnected.value) {
|
||||
console.log('初始网络未连接,暂不尝试连接 WebSocket');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 页面显示,尝试连接 WebSocket
|
||||
const onShowconnect = () => {
|
||||
if (autoReconnect.value) {
|
||||
uni.showLoading({
|
||||
title: `尝试再次连接`,
|
||||
mask: true
|
||||
})
|
||||
connect();
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = webSocketUtils;
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
closeSocket();
|
||||
});
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
sendMessage,
|
||||
closeSocket,
|
||||
receivedMessages,
|
||||
closeExistingConnection,
|
||||
onShowconnect,
|
||||
initNetworkListener
|
||||
};
|
||||
};
|
||||
|
||||
export default useWebSocket;
|
||||
|
|
@ -33,25 +33,32 @@
|
|||
reactive,
|
||||
watch,
|
||||
onMounted,
|
||||
computed
|
||||
computed,
|
||||
toRefs,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
|
||||
const store = useNavbarStore();
|
||||
const {
|
||||
showBack,
|
||||
rightText,
|
||||
showSearch,
|
||||
title,
|
||||
isTransparent,
|
||||
height,
|
||||
hasPlaceholder
|
||||
} = store;
|
||||
const showSearch = computed(() => store.showSearch);
|
||||
const title = computed(() => store.title);
|
||||
hasPlaceholder,
|
||||
scrollTop
|
||||
} = toRefs(store);
|
||||
|
||||
const keyword = ref()
|
||||
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
try {
|
||||
uni.pro.switchTab('index/index')
|
||||
} catch (error) {
|
||||
uni.pro.switchTab('index/index')
|
||||
//TODO handle the exception
|
||||
}
|
||||
};
|
||||
|
||||
const onRightTextClick = () => {
|
||||
|
|
@ -60,7 +67,7 @@
|
|||
|
||||
const navbarStyle = computed(() => {
|
||||
return {
|
||||
height: `${height}px`,
|
||||
// height: `${height}px`,store.showSearch=fa
|
||||
backgroundColor: store.scrollTop >= 44 ? '#fff' : 'transparent'
|
||||
};
|
||||
});
|
||||
|
|
@ -69,22 +76,28 @@
|
|||
oneStyle: {},
|
||||
towStyle: {}
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
if (store.showSearch > 44) {
|
||||
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const statusBarHeight = systemInfo.statusBarHeight;
|
||||
console.log(menuButtonInfo)
|
||||
// 计算标题的垂直偏移量
|
||||
const verticalOffset = menuButtonInfo.top;
|
||||
// const verticalOffset = menuButtonInfo.top - statusBarHeight;
|
||||
const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
|
||||
menuButtonInfo.top - menuButtonInfo.height)
|
||||
// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
|
||||
// menuButtonInfo.top - menuButtonInfo.height)
|
||||
const titleHeight = menuButtonInfo.height;
|
||||
centerContentStyle.oneStyle = {
|
||||
paddingTop: `${verticalOffset}px`,
|
||||
paddingRight: `${menuButtonInfo.width +20}px`,
|
||||
// paddingTeft: `${menuButtonInfo.width +20}px`,
|
||||
height: `${height}px`,
|
||||
// height: `${height}px`,
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
centerContentStyle.towStyle = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<view class="full-screen-loading" v-if="isLoading">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<view class="loading-text">努力加载中...</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 全屏遮罩 */
|
||||
.full-screen-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background: rgba(0, 0, 0, 0.7);
|
||||
background:#fff;
|
||||
/* 半透明背景 */
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/* 加载内容容器 */
|
||||
.loading-content {
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
|
||||
/* 旋转加载动画 */
|
||||
.loading-spinner {
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
/* 蓝色动画部分 */
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
/* 加载文字 */
|
||||
.loading-text {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 定义旋转动画 */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,16 +29,16 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
computed
|
||||
computed,
|
||||
toRefs
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
const {
|
||||
showBack,
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
height,
|
||||
hasPlaceholder,
|
||||
scrollTop
|
||||
} = store;
|
||||
} = toRefs(store);
|
||||
|
||||
const keyword = ref()
|
||||
|
||||
|
|
@ -62,30 +62,30 @@
|
|||
const onRightTextClick = () => {
|
||||
console.log('右边文字被点击');
|
||||
};
|
||||
|
||||
const navbarStyle = computed(() => {
|
||||
return {
|
||||
height: `${height}px`,
|
||||
backgroundColor: store.scrollTop >= 44 ? '#F9F9F9' : 'transparent'
|
||||
// height: `${height.value}px`,
|
||||
backgroundColor: scrollTop.value >= 44 ? '#F9F9F9' : 'transparent'
|
||||
};
|
||||
});
|
||||
// 小程序单独胶囊的样式
|
||||
const centerContentStyle = ref({});
|
||||
onMounted(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const statusBarHeight = systemInfo.statusBarHeight;
|
||||
// 计算标题的垂直偏移量
|
||||
const verticalOffset = menuButtonInfo.top;
|
||||
// const verticalOffset = menuButtonInfo.top - statusBarHeight;
|
||||
const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
|
||||
menuButtonInfo.top - menuButtonInfo.height)
|
||||
// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
|
||||
// menuButtonInfo.top - menuButtonInfo.height)
|
||||
const titleHeight = menuButtonInfo.height;
|
||||
centerContentStyle.value = {
|
||||
paddingTop: `${verticalOffset}px`,
|
||||
paddingRight: `${menuButtonInfo.width +20}px`,
|
||||
height: `${height}px`,
|
||||
lineHeight: `${height}px`,
|
||||
// height: `${height.value}px`,
|
||||
// lineHeight: `${height.value}px`,
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
// #endif
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<view class="password-input-modal" v-if="isShow">
|
||||
<view class="modal-mask" @click="closeModal"></view>
|
||||
<view class="modal-content">
|
||||
<view class="title">请输入支付密码</view>
|
||||
<view class="input-container">
|
||||
<view v-for="(item, index) in 6" :key="index" class="input-box">
|
||||
{{ password[index] ? '*' : '' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyboard">
|
||||
<view v-for="(num, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'delete']" :key="index" class="key"
|
||||
@click="handleKeyClick(num)">
|
||||
{{ num === 'delete' ? '删除' : num }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
defineExpose,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
// 接收父组件传递的显示状态
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 定义向父组件发送事件
|
||||
const emits = defineEmits(['inputComplete', 'close', 'closeModal']);
|
||||
|
||||
// 存储输入的密码
|
||||
const password = ref('');
|
||||
|
||||
// 处理键盘点击事件
|
||||
const handleKeyClick = (num) => {
|
||||
if (num === 'delete') {
|
||||
password.value = password.value.slice(0, -1);
|
||||
} else if (password.value.length < 6) {
|
||||
password.value += num;
|
||||
}
|
||||
if (password.value.length === 6) {
|
||||
emits('inputComplete', password.value);
|
||||
password.value = ''
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭模态框
|
||||
const closeModal = () => {
|
||||
emits('close');
|
||||
password = '';
|
||||
};
|
||||
// 将方法暴露给父组件
|
||||
defineExpose({
|
||||
closeModal
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.password-input-modal {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 40rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 10rpx;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.key {
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
font-size: 26rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
<template>
|
||||
<!-- 支付方式 -->
|
||||
<view class="paymentMethod">
|
||||
<view class="paymentMethod_content">
|
||||
<view class="paymentMethod_title">支付方式</view>
|
||||
<up-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChanges" :size="28"
|
||||
placement="column">
|
||||
<block v-for="(item,index) in paymentMethodList" :key="index">
|
||||
<view class="method_list" @click="groupChanges(item.type)"
|
||||
v-if="(index+1) == radiovalue?!changeFreeenable:true">
|
||||
<view class="method_list_top">
|
||||
<view class="method_list_top_left">
|
||||
<image class="icon" :src="item.url" mode="aspectFill" />
|
||||
<view class="method_list_top_cen">
|
||||
<view class="name"> {{ item.name }} </view>
|
||||
<view class="method_list_bom" v-if="item.type == 1">
|
||||
<text class="balance" v-if="orderVIP.isVip == 1">
|
||||
会员卡余额¥{{orderVIP?orderVIP.amount:0}}</text>
|
||||
<text class="topUpNow"
|
||||
@click="goRecharge">{{orderVIP.isVip == 0?'注册会员':'去充值'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-radio activeColor="#E8AD7B" icon-size="18" size="18" :name="item.type">
|
||||
</up-radio>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
defineProps,
|
||||
computed,
|
||||
defineEmits,
|
||||
watch,
|
||||
watchEffect,
|
||||
defineExpose
|
||||
} from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
rechargeFreeChecked: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
payAmount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
freeCheck: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
changeFreeenable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
const orderVIP = ref(null)
|
||||
const emits = defineEmits(['customevent', 'groupChange']);
|
||||
watchEffect(() => {
|
||||
orderVIP.value = uni.cache.get('orderVIP')
|
||||
})
|
||||
|
||||
const orderVIPfun = (data) => {
|
||||
orderVIP.value = data
|
||||
}
|
||||
|
||||
const paymentMethodList = ref([
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
name: "微信支付",
|
||||
type: 2,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
|
||||
payType: 'wechatPay'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
{
|
||||
name: "支付宝支付",
|
||||
type: 3,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
|
||||
payType: 'aliPay'
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "余额支付",
|
||||
type: 1,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
|
||||
payType: 'accountPay'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
const paymentMethodName = ref([{
|
||||
name: "余额支付",
|
||||
type: 1,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
|
||||
payType: 'accountPay'
|
||||
},
|
||||
{
|
||||
name: "微信支付",
|
||||
type: 2,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
|
||||
payType: 'wechatPay'
|
||||
},
|
||||
{
|
||||
name: "支付宝支付",
|
||||
type: 3,
|
||||
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
|
||||
payType: 'aliPay'
|
||||
},
|
||||
])
|
||||
|
||||
const radiovalue = ref(2) // 支付方式
|
||||
|
||||
const ispws = ref(false) // 输入支付密码
|
||||
|
||||
const storeInfo = ref({})
|
||||
|
||||
// * 监听支付方式切换
|
||||
const groupChanges = (type) => {
|
||||
if (props.freeCheck && type == 1) {
|
||||
return;
|
||||
}
|
||||
// if (props.payAmount <= 0 && type != 1) {
|
||||
// return;
|
||||
// }
|
||||
radiovalue.value = type;
|
||||
let name = paymentMethodName.value[type - 1].name;
|
||||
|
||||
emits("groupChange", paymentMethodName.value[type - 1])
|
||||
}
|
||||
|
||||
// 去充值
|
||||
const goRecharge = () => {
|
||||
uni.pro.navigateTo('user/member/index', {
|
||||
shopId: orderVIP.value.shopId
|
||||
})
|
||||
}
|
||||
// 将方法暴露给父组件
|
||||
defineExpose({
|
||||
groupChanges,
|
||||
orderVIPfun
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.paymentMethod {
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.paymentMethod_content {
|
||||
background-color: #fff;
|
||||
border-radius: 22rpx;
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.paymentMethod_title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.method_list {
|
||||
padding: 40rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.method_list_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.method_list_top_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 54.67rpx !important;
|
||||
height: 48rpx !important;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.method_list_top_cen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.method_list_bom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.balance {
|
||||
margin-right: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.topUpNow {
|
||||
color: #FF803D;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.method_list:nth-child(odd) {
|
||||
border-bottom: 2rpx solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +1,28 @@
|
|||
const debug = process.env.NODE_ENV == 'development' ? true : false;
|
||||
// const debug = process.env.NODE_ENV == 'development' ? true : false;
|
||||
const debug = false
|
||||
// #ifdef H5
|
||||
const proxyApi = "/api"
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN || APP || MP-ALIPAY
|
||||
// const proxyApi = 'http://192.168.1.15:9888/cashierService' // 王伟
|
||||
// const proxyApi = 'http://192.168.1.27:9888/cashierService' // 帆哥
|
||||
// const proxyApiwws = 'ws://192.168.1.15:9888/netty' // 测试
|
||||
// const proxyApi = 'https://wxcashiertest.sxczgkj.cn/cashierService' // 测试
|
||||
// const proxyApiwws = 'wss://wxcashiertest.sxczgkj.cn/netty' // 测试
|
||||
// const proxyApi = 'https://pre-cashier.sxczgkj.cn/cashierService' // 预发布
|
||||
// const proxyApiwws = 'wss://pre-cashier.sxczgkj.cn/netty' // 预发布
|
||||
const proxyApi = 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
const proxyApiwws = 'wss://cashier.sxczgkj.cn/netty' // 线上
|
||||
const proxyApi = 'http://192.168.1.31' // 调试地址
|
||||
const proxyApiwws = 'ws://192.168.1.31:2348' // 调试地址
|
||||
// 测试
|
||||
// const proxyApi = "https://fv901fw8033.vicp.fun"
|
||||
// const proxyApiwws = 'wss://sockets.sxczgkj.com/wss'
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
const baseUrl = debug ? proxyApi + '/cashierService' : "https://cashier.sxczgkj.cn/cashierService"
|
||||
const baseUrlwws = 'ws://cashier.sxczgkj.cn/cashierService'
|
||||
const baseUrl = debug ? proxyApi : "https://tapi.cashier.sxczgkj.cn"
|
||||
const baseUrlwws = 'wss://sockets.sxczgkj.com/wss'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP || MP-WEIXIN || MP-ALIPAY
|
||||
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
const baseUrlwws = debug ? proxyApiwws : 'wss://cashier.sxczgkj.cn/netty' // 线上
|
||||
|
||||
// const baseUrl = 'https://wxcashiertest.sxczgkj.cn/cashierService' // 测试
|
||||
// const baseUrlwws = 'wss://wxcashiertest.sxczgkj.cn/netty' // 测试
|
||||
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.com' // 线上
|
||||
const baseUrlwws = debug ? proxyApiwws : 'wss://czgeatws.sxczgkj.com/wss' // 线上
|
||||
// #endif
|
||||
|
||||
|
||||
// import VConsole from "./vConsole.js"
|
||||
// if (debug) {
|
||||
// new VConsole()
|
||||
|
|
|
|||
|
|
@ -7,33 +7,32 @@
|
|||
function get(key) {
|
||||
try {
|
||||
let res = uni.getStorageSync(key)
|
||||
|
||||
if (!res) {
|
||||
return ''
|
||||
}
|
||||
// res = JSON.parse(res)
|
||||
|
||||
if (res.__expiretime && res.__expiretime < uni.utils.timestamp()) {
|
||||
|
||||
|
||||
if (res.expiretime && res.expiretime < Date.now()) {
|
||||
remove(key)
|
||||
return ''
|
||||
} else {
|
||||
try {
|
||||
const parsed = JSON.parse(res);
|
||||
C
|
||||
} catch (e) {
|
||||
return res
|
||||
}
|
||||
// // #ifdef H5
|
||||
// try {
|
||||
// const parsed = JSON.parse(res);
|
||||
// return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed) ? parsed : ''
|
||||
// } catch (e) {
|
||||
// return res
|
||||
// }
|
||||
// // #endif
|
||||
// // #ifndef H5
|
||||
// return res
|
||||
// // #endif
|
||||
// #ifdef APP-PLUS
|
||||
return res.value
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
res = JSON.parse(res)
|
||||
return res.value
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
return res.value
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
return res.value
|
||||
// #endif
|
||||
|
||||
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
return ''
|
||||
|
|
@ -73,19 +72,13 @@ function getStorageData(key) {
|
|||
*/
|
||||
function set(key, value, expire = uni.conf.default_expire) {
|
||||
let cacheItem = {}
|
||||
cacheItem = value
|
||||
cacheItem.value = value
|
||||
// console.log(cacheItem)
|
||||
// if (expire > 0) {
|
||||
// cacheItem.__expiretime = uni.utils.timestamp() + expire
|
||||
// }
|
||||
// // #ifdef H5
|
||||
// uni.setStorageSync(key, JSON.stringify(cacheItem))
|
||||
// // #endif
|
||||
// // #ifndef H5
|
||||
// uni.setStorageSync(key, cacheItem)
|
||||
// // #endif
|
||||
uni.setStorageSync(key, JSON.stringify(cacheItem))
|
||||
// uni.setStorageSync(key, cacheItem)
|
||||
if (expire > 0) {
|
||||
cacheItem.expiretime = Date.now() + expire * 60 * 1000;
|
||||
}
|
||||
// uni.setStorageSync(key,JSON.stringify(cacheItem))
|
||||
uni.setStorageSync(key, cacheItem)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -156,7 +149,7 @@ function _removeExpired(key) {
|
|||
}
|
||||
|
||||
res = JSON.parse(res)
|
||||
if (res.__expiretime && res.__expiretime < uni.utils.timestamp()) {
|
||||
if (res.expiretime && res.expiretime < uni.utils.timestamp()) {
|
||||
remove(key)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "^2.0.2-4040520250103001",
|
||||
"dayjs": "^1.11.13",
|
||||
"jsbarcode": "^3.11.6",
|
||||
"pinia": "^2.3.1",
|
||||
"pinia-plugin-persistedstate": "^4.2.0"
|
||||
}
|
||||
|
|
|
|||
120
pages.json
120
pages.json
|
|
@ -12,14 +12,25 @@
|
|||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
"navigationStyle": "custom",
|
||||
"mp-alipay": {
|
||||
"transparentTitle": "always",
|
||||
"titlePenetrate": "YES",
|
||||
"autoBackButton": false,
|
||||
"allowsBounceVertical": "NO"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/indexs",
|
||||
"path": "pages/index/drinks",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarTitleText": "咖啡饮品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/freedaily",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日免单"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -35,6 +46,7 @@
|
|||
"navigationBarTitleText": "红包中心"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/product/index",
|
||||
"style": {
|
||||
|
|
@ -42,6 +54,30 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/product/choosetable",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择人数"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/coupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠劵"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
|
|
@ -54,6 +90,77 @@
|
|||
"allowsBounceVertical": "NO"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员充值"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/memberdetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员卡"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/paycode",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员支付码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/billDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账单明细"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/qrcode",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员支付码"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/user/member/setPassword",
|
||||
"style": {
|
||||
"navigationBarTitleText": "密码设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/storedManage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/member/instructions",
|
||||
"style": {
|
||||
"navigationBarTitleText": "使用须知"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/myself",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人资料"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/coupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠劵"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/subscribeto/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "叫号"
|
||||
}
|
||||
}
|
||||
],
|
||||
"uniIdRouter": {},
|
||||
|
|
@ -73,6 +180,11 @@
|
|||
"selectedIconPath": "static/tabbar/1-1.png",
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
}, {
|
||||
"iconPath": "static/tabbar/2.png",
|
||||
"selectedIconPath": "static/tabbar/2-1.png",
|
||||
"pagePath": "pages/order/index",
|
||||
"text": "订单列表"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabbar/4.png",
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@
|
|||
<view class="onecontentleft" v-if="bannervo">
|
||||
现有<text style="color: #FC851E;font-size: 24rpx;">
|
||||
{{bannervo.coupons==null?116:bannervo.coupons}}人
|
||||
<!-- {{bannervo.coupons==null?116:bannervo.coupons}}人 -->
|
||||
</text>
|
||||
已免单
|
||||
</view>
|
||||
<view class="onecontentright flex-start">
|
||||
<view class="onecontentrightimage" v-if="bannervo">
|
||||
<!-- <view class="onecontentrightimage" v-if="bannervo">
|
||||
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
||||
<view class="swiperItem" v-for="(item, index) in bannervo.counponsInfo" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
|
|
@ -16,17 +17,24 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view style="overflow: hidden;width: 100rpx;">
|
||||
<view style="width: 600rpx;" class="swiperstyle">
|
||||
<image style="width: 30rpx;height: 30rpx;border-radius: 50%;display: inline-block;"
|
||||
v-for="(item, index) in listData" :key="index" :src="item.logo">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentrighttext">
|
||||
<swiper class="swiper" circular :autoplay="true" :vertical='true' :interval="2000">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo.counponsInfo" :key="index">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in bannervo" :key="index">
|
||||
{{item.name}}已省{{item.money}}元钱
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,7 +43,9 @@
|
|||
defineProps,
|
||||
onBeforeUnmount,
|
||||
reactive,
|
||||
defineExpose
|
||||
defineExpose,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
bannervo: {
|
||||
|
|
@ -51,6 +61,13 @@
|
|||
}] //
|
||||
}
|
||||
});
|
||||
|
||||
const listData = ref()
|
||||
const listdataNumber = ref(4)
|
||||
watch(() => props.bannervo, (n, o) => {
|
||||
listData.value = [...props.bannervo,...props.bannervo]
|
||||
})
|
||||
|
||||
const slideNote = reactive({
|
||||
x: 0,
|
||||
y: 0
|
||||
|
|
@ -137,6 +154,11 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.swiperstyle {
|
||||
position: relative;
|
||||
animation: animationName 5s linear infinite;
|
||||
}
|
||||
|
||||
.onecontentrightimage {
|
||||
width: 65rpx;
|
||||
position: relative;
|
||||
|
|
@ -207,7 +229,7 @@
|
|||
|
||||
.onecontentrighttext {
|
||||
width: 232rpx;
|
||||
|
||||
margin-left: 20rpx;
|
||||
.swiper {
|
||||
height: 28rpx;
|
||||
// width: 232rpx;
|
||||
|
|
@ -239,4 +261,16 @@
|
|||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animationName {
|
||||
0% {
|
||||
/* 动画开始时的样式 */
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
/* 动画结束时的样式 */
|
||||
left: -290rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<view class="towcontent flex-between" v-if="district">
|
||||
<view class="towcontent_item flex-colum" v-for="(item,index) in district" :key="index"
|
||||
@click="clickdistrict(item,index)">
|
||||
<image :src="item.coverImg" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
<view v-for="(item,index) in district" :key="index" @click="clickdistrict(item,index)">
|
||||
<view class="towcontent_item flex-colum" v-if="item.isShowMall == 1">
|
||||
<image :src="item.coverImg" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,15 +16,12 @@
|
|||
defineProps
|
||||
} from 'vue';
|
||||
import {
|
||||
APIproductqueryShop
|
||||
} from "@/common/api/product/product.js";
|
||||
import {
|
||||
Storelogin
|
||||
} from '@/stores/share.js';
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
const props = defineProps({
|
||||
district: Array
|
||||
});
|
||||
const clickdistrict = (item) => {
|
||||
const clickdistrict = async (item) => {
|
||||
switch (item.jumpType) {
|
||||
case 'absolute':
|
||||
uni.pro.navigateTo('webview/webview', {
|
||||
|
|
@ -36,47 +35,13 @@
|
|||
uni.pro.navigateTo(item.absUrl);
|
||||
break;
|
||||
case 'scan':
|
||||
// #ifndef H5
|
||||
if (!uni.utils.pluschooseImage()) {
|
||||
return false
|
||||
}
|
||||
// #ifdef APP || MP-WEIXIN || MP-ALIPAY
|
||||
uni.scanCode({
|
||||
success: async (res) => {
|
||||
let tableCode = getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
let data = await APIproductqueryShop({
|
||||
code: uni.cache.get('tableCode'),
|
||||
})
|
||||
// -4请求登录
|
||||
const store = Storelogin();
|
||||
if (data.code == '-4') {
|
||||
if (await store.actionslogin()) {
|
||||
// 成功
|
||||
} else {
|
||||
// 失败接着请求
|
||||
await store.actionslogin()
|
||||
}
|
||||
}
|
||||
if (data.data.shopTableInfo && !data.data.shopTableInfo.choseCount) {
|
||||
uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||||
tableCode: tableCode,
|
||||
shopId: data.data.storeInfo.id,
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('order_food/order_food', {
|
||||
tableCode: tableCode,
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
const store = productStore();
|
||||
await store.scanCodeactions()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -121,8 +86,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.towcontent_item:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
// .towcontent_item:nth-child(1) {
|
||||
// margin-left: 0rpx;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<view class="therecontent flex-between" v-if="salesList">
|
||||
<view class="therecontent flex-between">
|
||||
<view class="therecontent_box_item">
|
||||
<view class="therecontent_box_imge flex-between" @click="jrtoday(0)">
|
||||
<view class="therecontent_box_imge_text">
|
||||
{{todayList.name}}
|
||||
{{todayList.name|| ''}}
|
||||
</view>
|
||||
<view class="therecontent_box_imge_right flex-start">
|
||||
<view>
|
||||
|
|
@ -13,14 +13,14 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.todayList"
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone">
|
||||
<text
|
||||
style="margin-left: 0;">{{item.productName.length>5?item.productName.substring(0,5)+'...':item.productName}}</text>
|
||||
style="margin-left: 0;">{{item.name.length>5?item.name.substring(0,5)+'...':item.name}}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtow flex-around">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png" mode="widthFix">
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
style="background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box2.png) no-repeat; background-size: cover;"
|
||||
@click="jrtoday(1)">
|
||||
<view class="therecontent_box_imge_text">
|
||||
{{salesList.name}}
|
||||
{{salesList.name || ''}}
|
||||
</view>
|
||||
<view class="therecontent_box_imge_right flex-start">
|
||||
<view>
|
||||
|
|
@ -54,17 +54,17 @@
|
|||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
<image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_114,h_136`" mode="aspectFill">
|
||||
</image>
|
||||
<view class="therecontent_box_itembox_itemview flex-colum-start">
|
||||
<view class="therecontent_box_itembox_itemviewone flex-start">
|
||||
<view class="therecontent_box_itembox_itemviewoneafter">
|
||||
TOP.{{index + 1}}
|
||||
</view>
|
||||
<text>{{ item.productName.length>5?item.productName.substring(0,5)+'...':item.productName }}</text>
|
||||
<text>{{ item.name.length>5?item.name.substring(0,5)+'...':item.name }}</text>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtowdiscount flex-around">
|
||||
已抢{{item.realSalesNumber}}份
|
||||
已抢{{item.saleNum}}份
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewthere ">
|
||||
<text>¥{{item.salePrice}}</text>
|
||||
|
|
@ -82,13 +82,20 @@
|
|||
defineProps
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
salesList: Object,
|
||||
salesList: {
|
||||
type: Object,
|
||||
default: {
|
||||
name: '',
|
||||
date: '',
|
||||
hotList: [],
|
||||
}
|
||||
},
|
||||
todayList: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name:'',
|
||||
date:'',
|
||||
hotList:[]
|
||||
name: '',
|
||||
date: '',
|
||||
hotList: []
|
||||
}) //
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -186,8 +186,8 @@
|
|||
const ordergetYhqParass = async () => {
|
||||
let res = await APIordergetYhqPara()
|
||||
try {
|
||||
orderview.list = res.data
|
||||
for (let i = 0; i <= res.data.length; i++) {
|
||||
orderview.list = res
|
||||
for (let i = 0; i <= res.length; i++) {
|
||||
orderfindCouponses(i, orderview.list[i].name);
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
size: 10,
|
||||
type: name
|
||||
})
|
||||
orderview.list[i].orderview.listdata = res.data.list
|
||||
orderview.list[i].orderview.listdata = res.list
|
||||
console.log(orderview.list)
|
||||
}
|
||||
const ordermineCouponsthis = async () => {
|
||||
|
|
@ -214,8 +214,8 @@
|
|||
orderId: ''
|
||||
})
|
||||
try {
|
||||
viewlist.totalnumber = res.data.total
|
||||
viewlist.list = res.data.list.slice(0, 2)
|
||||
viewlist.totalnumber = res.total
|
||||
viewlist.list = res.list.slice(0, 2)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
|
@ -272,8 +272,8 @@
|
|||
// async ordergetYhqParass() { //类型列表
|
||||
// let res = await this.api.ordergetYhqPara()
|
||||
// try {
|
||||
// this.orderview.list = res.data
|
||||
// for (let i = 0; i <= res.data.length; i++) {
|
||||
// this.orderview.list = res
|
||||
// for (let i = 0; i <= res.length; i++) {
|
||||
// this.orderfindCouponses(i, this.orderview.list[i].name);
|
||||
// }
|
||||
// } catch (e) {
|
||||
|
|
@ -286,7 +286,7 @@
|
|||
// size: 10,
|
||||
// type: name
|
||||
// })
|
||||
// this.orderview.list[i].orderview.listdata = res.data.list
|
||||
// this.orderview.list[i].orderview.listdata = res.list
|
||||
// console.log(this.orderview.list)
|
||||
// this.$forceUpdate();
|
||||
// },
|
||||
|
|
@ -299,8 +299,8 @@
|
|||
// orderId: ''
|
||||
// })
|
||||
// try {
|
||||
// this.viewlist.totalnumber = res.data.total
|
||||
// this.viewlist.list = res.data.list.slice(0, 2)
|
||||
// this.viewlist.totalnumber = res.total
|
||||
// this.viewlist.list = res.list.slice(0, 2)
|
||||
// } catch (e) {
|
||||
// //TODO handle the exception
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,310 +1,173 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='false'></navseat>
|
||||
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode="aspectFill"></image>
|
||||
<image class="onecontentimage" :src="datas.toplist.coverImg" mode="aspectFill"></image>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<!-- <view :class="isFixedTop?'towcontentlistxitemboxfixed':''" :style="{'top':customheighttop + 'px'}">
|
||||
<view class="towcontentlistxitem flex-start">
|
||||
<view class="towcontentlistxitembox flex-colum"
|
||||
:class="towcontentclickindex == index?'towcontentlistxitemboxopacity':''"
|
||||
v-for="(item,index) in listbox" :key="index" @click="towcontentclick(index)">
|
||||
<text>{{item.name}}</text>
|
||||
<image v-if="towcontentclickindex == index"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="twocontent" v-for="(item, index) in datas.list" :key="index" @click="clickproduct(item)">
|
||||
<view class="df twoBox">
|
||||
<view class="df ">
|
||||
<image :src="item.logo" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" mode="">
|
||||
</image>
|
||||
<view class="">
|
||||
{{ item.shopName }}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="isFixedTop" :style="{'height':windowHeight - seighT + 'px'}"></view>
|
||||
<view class="towcontentboutton" :style="{'height':seighT + 'px'}">
|
||||
<!-- <scroll-view :style="{'height':seighT + 'px'}" scroll-y @scrolltolower="loadMore"> -->
|
||||
<view class="fivecontent_item" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image class="fivecontent_item_navimage" :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.distances}}
|
||||
<view class="">
|
||||
{{ item.distance }}m
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style=" justify-content: space-between; flex-wrap: wrap; padding: 30rpx 0rpx;">
|
||||
<image :src="item.coverImg" style="width: 192rpx;height: 192rpx;" mode=""></image>
|
||||
<view style="margin-left: 24rpx; flex: auto;">
|
||||
<view class="df" style="justify-content: space-between; flex-wrap: wrap;">
|
||||
<view style="font-weight: 500; font-size: 28rpx; color: #333333;">{{ item.name }}</view>
|
||||
<view style=" font-weight: 400; font-size: 24rpx; color: #999999;">已抢{{ item.saleNum
|
||||
}}份
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere " style="">
|
||||
<view class="df" style="align-items: normal;">
|
||||
<view class="df">
|
||||
<text
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 500; font-size: 16rpx; color: #FF7127;">
|
||||
到手
|
||||
</text>
|
||||
<text
|
||||
style="font-weight: 500; font-size: 24rpx; color: #FF7127;">¥{{item.salePrice}}</text>
|
||||
<view style=" margin-left: 4rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;">
|
||||
{{item.discount}}折
|
||||
</view>
|
||||
<text style=" margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;">¥{{item.originPrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start" v-for="(s,index1) in item.shopTag"
|
||||
:key="index1" :style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg" :src="s.shareImg"
|
||||
mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
<view style=" position: absolute;
|
||||
top: 16rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;">
|
||||
马上抢
|
||||
</view>
|
||||
</view>
|
||||
<view class="df" style="justify-content: space-between;">
|
||||
<view
|
||||
style="font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 24rpx; color: #999999; padding-bottom: 8rpx;">
|
||||
共省{{item.originPrice-item.salePrice}}元
|
||||
</view>
|
||||
<view
|
||||
style=" font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 16rpx;margin-right: 12rpx; color: #FFFFFF;">
|
||||
<uni-countdown :show-day="false" :hour="convertMilliseconds(item.endTime).hours"
|
||||
:minute="convertMilliseconds(item.endTime).minutes"
|
||||
:second="convertMilliseconds(item.endTime).seconds" :indexs='index' color="#FFFFFF"
|
||||
border-color="#00B26A" splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="item.image" mode=""></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||
<view>{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
||||
<text class="flex_startone">到手</text>
|
||||
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_tow">
|
||||
{{item.discount || ''}}折
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_there">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :show-day="false"
|
||||
:day="item.end_times.d" :hour="item.end_times.h"
|
||||
:minute="item.end_times.m" :second="item.end_times.s"
|
||||
:indexs='index' color="#FFFFFF" border-color="#00B26A"
|
||||
splitorColor="#FFFFFF" :font-size="7"></uni-countdown>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue';
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
towcontentclickindex: 0,
|
||||
windowHeight: '',
|
||||
seighT: '',
|
||||
customheighttop: '', //top高度
|
||||
isFixedTop: false,
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
list: [],
|
||||
toplist: {},
|
||||
listbox: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
distance: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
type:''
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacitys = false
|
||||
} else {
|
||||
this.opacitys = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
_this.GetTop()
|
||||
// _this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.type = e.value
|
||||
// this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// this.GetTop()
|
||||
// }, 1000)
|
||||
},
|
||||
onShow() {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.type = res.data.value
|
||||
_this.distiricttopCommon()
|
||||
// setTimeout(() => {
|
||||
// _this.GetTop()
|
||||
_this.init_fn()
|
||||
// }, 1000)
|
||||
}
|
||||
});
|
||||
// this.init_fn()
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item){
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.form = {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type:this.type, //品类
|
||||
orderBy:0, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: 1,
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
async distiricttopCommon(e) {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: this.type, //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
this.listbox = res.data.menu
|
||||
}
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
let res = await this.api.indexlist(this.form)
|
||||
var dates = new Date().getTime();
|
||||
res.data.list.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
||||
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
||||
let s = Math.floor(leftTime / 1000 % 60);
|
||||
item.end_times = {
|
||||
d: d,
|
||||
h: h,
|
||||
m: m,
|
||||
s: s
|
||||
}
|
||||
} else {
|
||||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
//G滚动底部
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
|
||||
// #ifdef MP-WEIXIN
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
this.seighT = data.windowHeight - custom.height - custom.top;
|
||||
console.log(custom)
|
||||
this.customheighttop = custom.height + custom.top
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
this.customheighttop = data.statusBarHeight / 2
|
||||
this.seighT = data.windowHeight - data.statusBarHeight / 2
|
||||
// #endif
|
||||
this.$u.getRect('.towcontentlistxitembt').then(res => {
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
})
|
||||
this.$u.getRect('.towcontentlistxitem').then(res => {
|
||||
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
|
||||
this.seighT = this.seighT - res.height //高度
|
||||
console.log(res)
|
||||
})
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
APIhome,
|
||||
userdict
|
||||
} from "@/common/api/index/index.js"
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
let datas = reactive({
|
||||
titlename: '咖啡',
|
||||
opacitys: false,
|
||||
toplist: "",
|
||||
list: []
|
||||
})
|
||||
onLoad(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
function clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id: item.id
|
||||
})
|
||||
}
|
||||
async function getList() {
|
||||
let ele = await userdict({
|
||||
type: "group"
|
||||
})
|
||||
datas.toplist = ele
|
||||
let res = await APIhome({
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
categoryId: 1,
|
||||
orderType: 0,
|
||||
name: '',
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
distanceType: ''
|
||||
})
|
||||
datas.list = res.records
|
||||
}
|
||||
|
||||
function convertMilliseconds(milliseconds) {
|
||||
// 计算天数
|
||||
const days = Math.floor(milliseconds / 86400000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 86400000;
|
||||
// 计算小时数
|
||||
const hours = Math.floor(milliseconds / 3600000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 3600000;
|
||||
// 计算分钟数
|
||||
const minutes = Math.floor(milliseconds / 60000);
|
||||
// 计算剩余的毫秒数
|
||||
milliseconds %= 60000;
|
||||
// 计算秒数
|
||||
const seconds = Math.floor(milliseconds / 1000);
|
||||
|
||||
return {
|
||||
days,
|
||||
hours,
|
||||
minutes,
|
||||
seconds
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
|
|
@ -369,305 +232,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
.twocontent {
|
||||
padding: 20rpx 40rpx;
|
||||
|
||||
.twoBox {
|
||||
background-color: #fff;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0rpx;
|
||||
border-bottom: 1rpx solid #ccc;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
|
||||
.towcontentlistxitemboxfixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
margin-top: 0rpx !important;
|
||||
}
|
||||
|
||||
.towcontentlistxitem {
|
||||
// margin-top: -32rpx;
|
||||
padding: 36rpx 28rpx 0rpx 28rpx;
|
||||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembox:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembox {
|
||||
margin-left: 48rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitembt {
|
||||
padding: 28rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.towcontentlistxitembtitem {
|
||||
flex: none;
|
||||
padding: 8rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.towcontentlistxitembtitemaktev {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
background: #FEE06A;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.towcontentboutton {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.fivecontent_item_nav {
|
||||
image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_left {
|
||||
flex: auto;
|
||||
margin-left: 12rpx;
|
||||
|
||||
.fivecontent_item_nav_lefttop {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FEE9DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_box {
|
||||
margin-top: 20rpx;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
padding-top: 14rpx;
|
||||
|
||||
.fivecontent_item_boxitem {
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemleft {
|
||||
margin-left: 24rpx;
|
||||
flex: auto;
|
||||
|
||||
.fivecontent_item_boxitemleftone {
|
||||
width: 100%;
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
text {
|
||||
margin-left: 6rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow:nth-child(2) {
|
||||
margin-left: 12rpx;
|
||||
background: #FFD6D7;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.indexboxitemleftthereabsolute {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
right: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretext {
|
||||
// width: 100%;
|
||||
margin-top: 12rpx;
|
||||
// align-items: flex-end;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.fivecontent_item_boxitemlefthere_one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.flex_startone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.flex_starttow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_tow {
|
||||
margin-left: 4rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere_there {
|
||||
margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
width: 100%;
|
||||
padding-right: 7rpx;
|
||||
margin-top: 2rpx;
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 30rpx;
|
||||
padding: 16rpx 0;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.df {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view class="onecontentabsolute"></view>
|
||||
</view>
|
||||
|
|
@ -16,19 +14,18 @@
|
|||
<view class="towcontentoneboxswiper">
|
||||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||||
:interval="'3000'">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">{{item.userName}}* 免单{{item.orderAmount}}元订单号:{{item.orderNo}}
|
||||
<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号:{{ item.orderNo }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentoness">
|
||||
<view class="towcontentonebox_box">
|
||||
订单数:{{total}}
|
||||
订单数:10
|
||||
</view>
|
||||
<view class="towcontentonebox">
|
||||
<view class="towcontentoneboxswiper">
|
||||
|
|
@ -43,36 +40,19 @@
|
|||
金额
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiperitem" v-for="(item,index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
|
||||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
{{ item.isRefund == true ? '已免单' : '待免单' }}
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
{{ item.orderNo }}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.orderAmount}}元
|
||||
{{ item.orderAmount }}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiper" circular :autoplay='true' :vertical='true' interval="3000"
|
||||
display-multiple-items="4">
|
||||
<swiper-item class="swiperitem" v-for="(item,index) in orderfindWiningUserlist"
|
||||
:key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper_itemone">
|
||||
{{item.orderAmount}}元
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{item.isRefund == true ? '已免单':'待免单'}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -83,295 +63,266 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
forEach
|
||||
} from 'lodash';
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '',
|
||||
opacity: false,
|
||||
orderfindWiningUserlist: [],
|
||||
ordermineWinnerList: [],
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
total:0
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderfindWiningUser()
|
||||
this.ordermineWinnerEvent()
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: 'itemData',
|
||||
success: function(res) {
|
||||
_this.titlename = res.data.name
|
||||
}
|
||||
});
|
||||
},
|
||||
onReachBottom() {
|
||||
this.ordermineWinnerEvent()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
let orderfindWiningUserlist = ref([{
|
||||
userName: "王*",
|
||||
orderAmount: 12,
|
||||
orderNo: 213504512353548688546
|
||||
}, {
|
||||
userName: "赵*",
|
||||
orderAmount: 48,
|
||||
orderNo: 65481188834105643623210
|
||||
}, {
|
||||
userName: "钱*",
|
||||
orderAmount: 91,
|
||||
orderNo: 5891051346764518249444
|
||||
}, {
|
||||
userName: "孙*",
|
||||
orderAmount: 84,
|
||||
orderNo: 688472546798742575342
|
||||
}, {
|
||||
userName: "王",
|
||||
orderAmount: 73,
|
||||
orderNo: 597344582826533594131
|
||||
}, {
|
||||
userName: "郑*",
|
||||
orderAmount: 98,
|
||||
orderNo: 469867684658481051627
|
||||
}, {
|
||||
userName: "凯*",
|
||||
orderAmount: 95,
|
||||
orderNo: 895961781634536230631
|
||||
},
|
||||
|
||||
cut(str, firstStr, lastStr) {
|
||||
let start = str.indexOf(firstStr);
|
||||
let end = str.lastIndexOf(lastStr);
|
||||
return str.slice(start, end + 1); //slice方法截取的部分不包括第二参数所在位置
|
||||
},
|
||||
|
||||
async ordermineWinnerEvent() {
|
||||
let res = await this.api.ordermineWinner({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
page: this.form.page,
|
||||
size: this.form.size
|
||||
})
|
||||
if(res.code ==0){
|
||||
this.total = res.data.total
|
||||
if(this.form.page==1){
|
||||
this.ordermineWinnerList = res.data.list
|
||||
}else{
|
||||
this.ordermineWinnerList.push(...res.data.list)
|
||||
}
|
||||
this.form.page = ++this.form.page;
|
||||
}
|
||||
},
|
||||
async orderfindWiningUser() {
|
||||
let res = await this.api.orderfindWiningUser()
|
||||
this.orderfindWiningUserlist = res.data.map((i) => {
|
||||
i.userName = i.userName.slice(0, 1)
|
||||
return i
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
])
|
||||
let ordermineWinnerList = ref([{
|
||||
isRefund: true,
|
||||
orderNo: 895961781634536230631,
|
||||
orderAmount: "95"
|
||||
},
|
||||
{
|
||||
isRefund: true,
|
||||
orderAmount: 74,
|
||||
orderNo: 222674526516892311380
|
||||
},
|
||||
{
|
||||
isRefund: false,
|
||||
orderAmount: 23,
|
||||
orderNo: 862674526546892311380
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 684.19rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
|
||||
.onecontentabsolute {
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 534.19rpx;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
margin-top: -100rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentone {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
padding: 32rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentoneimage {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 242rpx;
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 40rpx;
|
||||
text-align: left;
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoness {
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
padding: 38rpx 48rpx;
|
||||
|
||||
.towcontentonebox_box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 262rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background: #FFA436;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 100%;
|
||||
|
||||
.towcontentoneboximage {
|
||||
width: 171.63rpx;
|
||||
height: 37.24rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentoneboxswiper {
|
||||
width: 100%;
|
||||
// height: 242rpx;
|
||||
padding-top: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper {
|
||||
height: 230rpx;
|
||||
|
||||
.swiperitem {
|
||||
height: 40rpx;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.swiper_itemone {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemtow {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.swiper_itemthere {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenttow {
|
||||
margin-top: 32rpx;
|
||||
padding-bottom: 144rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,140 +3,130 @@
|
|||
<Nav v-if="showindex == 'index'" />
|
||||
<view class="content" v-if="showindex == 'index'">
|
||||
<!-- 轮播图 -->
|
||||
<swipers :carousel='hometoplist.carousel'></swipers>
|
||||
<swipers :carousel='hometoplist.bannerList'></swipers>
|
||||
<!-- 广告 -->
|
||||
<advertisement :bannervo='hometoplist.bannervo' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
<advertisement :bannervo='hometoplist.freeBannerList' :itemStyle='advertisementStyle' ref="refbannervo">
|
||||
</advertisement>
|
||||
<!-- 金刚区 -->
|
||||
<diamond :district='hometoplist.district'></diamond>
|
||||
<!-- 今日上线 -->
|
||||
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
||||
<todaylist :todayList='hometoplist.todayProInfo' :salesList="hometoplist.hotRanking"></todaylist>
|
||||
<!-- 类目 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 只有小程序需要加height -->
|
||||
<up-sticky :offset-top="store.height">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<up-sticky>
|
||||
<!-- #endif -->
|
||||
<view class="fourcontent" id="fourcontent">
|
||||
<view class="flex-between" style="flex-wrap: inherit;">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
||||
:key="index" @click="viewHistory(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
||||
<up-icon v-if="item.isChild" style="margin-left: 10rpx;"
|
||||
:name="showproductlist && viewHistoryindex == index ?'arrow-up-fill':'arrow-down-fill'"
|
||||
color="#333333" size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="componentsclass" v-if="showproductlist">
|
||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
@grouping="openproductlist" />
|
||||
</view>
|
||||
<!-- <view :style="{'top':store.height+'px'}" class="fourcontent" id="fourcontent">
|
||||
<view class="flex-between" style="flex-wrap: inherit;">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menuList" :key="index"
|
||||
@click="viewHistory(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text style="margin-right: 10rpx;">{{item.name}}</text>
|
||||
<up-icon v-if="item.isChild" style="margin-left: 10rpx;"
|
||||
:name="showproductlist && viewHistoryindex == index ?'arrow-up-fill':'arrow-down-fill'"
|
||||
color="#333333" size="12"></up-icon>
|
||||
</view>
|
||||
|
||||
</up-sticky>
|
||||
|
||||
<!-- 首页抢购区域 -->
|
||||
<view class="fivecontent">
|
||||
<view class="fivecontent_item" v-for="(item,index) in homelist" :key="index"
|
||||
@click="fivecontentclick(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.districts}} {{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start"
|
||||
v-for="(s,index1) in item.shopTag" :key="index1"
|
||||
:style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
|
||||
:src="s.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_192,h_192`"
|
||||
mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between"
|
||||
style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<view>
|
||||
{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}
|
||||
</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
||||
<text class="flex_startone">到手</text>
|
||||
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_tow">
|
||||
{{item.discount || ''}}折
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_there">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<up-count-down
|
||||
:time="item.end_times.d * item.end_times.h * item.end_times.m *item.end_times.s"
|
||||
format="HH:mm:ss" autoStart millisecond @change="onChange">
|
||||
<view class="time">
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.minutes>10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.seconds>10?timeData.seconds:'0'+timeData.seconds }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore height='40' :status="formhomelist.status" iconSize='16' fontSize='16' />
|
||||
</view>
|
||||
<view class="componentsclass" v-if="showproductlist">
|
||||
<AreaSelect v-if="viewHistoryindex == 0" @updateValue="openproductlist" />
|
||||
<grouping v-if="viewHistoryindex == 1 || viewHistoryindex == 2 || viewHistoryindex == 3"
|
||||
@grouping="openproductlist" />
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 首页抢购区域 -->
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontent_item" v-for="(item,index) in formhomelist.list" :key="index"
|
||||
@click="fivecontentclick(item)">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image :src="item.shopImage" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.districts}} {{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_lefttopstart flex-start">
|
||||
<view class="fivecontent_item_nav_leftlang flex-start"
|
||||
v-for="(s,index1) in item.shopTag" :key="index1"
|
||||
:style="{'background':s.backColor,'color':s.backColor}">
|
||||
<image class="fivecontent_item_nav_leftlangimage" v-if="s.shareImg"
|
||||
:src="s.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_nav_leftlangtext">{{s.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image :src="`${item.image}?x-oss-process=image/resize,m_lfit,w_192,h_192`"
|
||||
mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between"
|
||||
style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<view>
|
||||
{{item.productName.length>7?item.productName.substring(0,7)+'...':item.productName}}
|
||||
</view>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="flex-start flexstartboxfttow">
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start"
|
||||
v-for="(c,index2) in item.proTag" :key="index2"
|
||||
:style="{'background':c.backColor,'color':c.backColor}">
|
||||
<image class="fivecontent_item_boxitemlefttowimage" v-if="c.shareImg"
|
||||
:src="c.shareImg" mode="aspectFill"></image>
|
||||
<text class="fivecontent_item_boxitemlefttowtext">{{c.name || ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="fivecontent_item_boxitemlefthere_one flex-start">
|
||||
<text class="flex_startone">到手</text>
|
||||
<text class="flex_starttow">¥{{item.salePrice}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_tow">
|
||||
{{item.discount || ''}}折
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere_there">
|
||||
¥{{item.originPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省{{item.save}}元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<up-count-down
|
||||
:time="item.end_times.d * item.end_times.h * item.end_times.m *item.end_times.s"
|
||||
format="HH:mm:ss" autoStart millisecond @change="onChange">
|
||||
<view class="time">
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.minutes>10?timeData.minutes:'0'+timeData.minutes }}</text>
|
||||
</view>
|
||||
<text class="time__doc">:</text>
|
||||
<view class="time__custom">
|
||||
<text
|
||||
class="time__custom__item">{{ timeData.seconds>10?timeData.seconds:'0'+timeData.seconds }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-count-down>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore :status="formhomelist.status" fontSize="14" color="#999" iconSize="14" />
|
||||
</view> -->
|
||||
</view>
|
||||
<indexs v-if="showindex == 'shopIndex'"></indexs>
|
||||
<indexs v-if="showindex == 'shopIndex'" :shopExtend='orderVIP.shopExtendList'></indexs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -148,7 +138,8 @@
|
|||
reactive,
|
||||
onBeforeUnmount,
|
||||
watch,
|
||||
getCurrentInstance
|
||||
getCurrentInstance,
|
||||
nextTick
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
|
|
@ -171,14 +162,19 @@
|
|||
import Nav from '@/components/indexnav.vue'; //导航栏
|
||||
import {
|
||||
APIhomehomePageUp,
|
||||
APIhome,
|
||||
APIshopUserInfo
|
||||
APIhome
|
||||
} from "@/common/api/index/index.js"
|
||||
import {
|
||||
APIgeocodelocation
|
||||
} from "@/common/api/api.js"
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
const store = useNavbarStore();
|
||||
// 动态更新导航栏配置
|
||||
const storeuser = productStore();
|
||||
store.updateNavbarConfig({
|
||||
showBack: true, //左边返回键
|
||||
rightText: '', //右边文字
|
||||
|
|
@ -191,8 +187,8 @@
|
|||
const showindex = ref('index')
|
||||
//计算广告图片的重合尺寸是位移
|
||||
const getStyle = (e) => {
|
||||
if (e > hometoplist.bannervo.counponsInfo.length / 2) {
|
||||
var right = hometoplist.bannervo.counponsInfo.length - e
|
||||
if (e > hometoplist.freeBannerList.length / 2) {
|
||||
var right = hometoplist.freeBannerList.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
|
|
@ -210,32 +206,36 @@
|
|||
const refbannervo = ref(null);
|
||||
//数据
|
||||
const hometoplist = reactive({
|
||||
bannervo: {
|
||||
counponsInfo: [],
|
||||
coupons: ''
|
||||
}
|
||||
|
||||
})
|
||||
// 首页上面数据
|
||||
const hometop = async () => {
|
||||
try {
|
||||
let res = await APIhomehomePageUp()
|
||||
Object.assign(hometoplist, res.data)
|
||||
if (hometoplist.bannervo.counponsInfo) {
|
||||
hometoplist.bannervo.counponsInfo.forEach((item, index) => {
|
||||
advertisementStyle.value.push(getStyle(index))
|
||||
})
|
||||
}
|
||||
Object.assign(hometoplist, res)
|
||||
hometoplist.freeBannerList.forEach((item, index) => {
|
||||
advertisementStyle.value.push(getStyle(index))
|
||||
})
|
||||
// 数据加载完后获取dom 高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
query.boundingClientRect((rect) => {
|
||||
elementTop.value = rect.top - store.height
|
||||
}).exec();
|
||||
}, 500)
|
||||
} catch (e) {}
|
||||
}
|
||||
// 下面初始数据
|
||||
const formhomelist = reactive({ //筛选
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
categoryId: '1', //品类
|
||||
orderType: '1', //1.理我最近 2.销量优先 3.价格优先
|
||||
distanceType: '1000', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
status: 'loadmore',
|
||||
name: '1',
|
||||
list: []
|
||||
})
|
||||
// 使用 reactive 创建响应式对象
|
||||
const timeData = ref({});
|
||||
|
|
@ -244,12 +244,11 @@
|
|||
const onChange = (e) => {
|
||||
timeData.value = e;
|
||||
};
|
||||
const homelist = ref([]) //接收数据
|
||||
const onLoadhome = async () => {
|
||||
try {
|
||||
let res = await APIhome(formhomelist)
|
||||
var dates = new Date().getTime();
|
||||
res.data.list.forEach((item, index) => {
|
||||
res.records.forEach((item, index) => {
|
||||
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
|
||||
if (leftTime >= 0) {
|
||||
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
||||
|
|
@ -266,36 +265,40 @@
|
|||
item.end_times = 0
|
||||
}
|
||||
})
|
||||
if (res.data.pages < formhomelist.page) {
|
||||
if ((res.totalPage == 0 || res.totalPage == 1) && res.totalRow <= 10) {
|
||||
console.log(res)
|
||||
formhomelist.status = 'nomore'
|
||||
if (form.page == 1 && res.data.list.length == 0) {
|
||||
|
||||
formhomelist.list = res.records
|
||||
if (formhomelist.page == 1 && res.records.length == 0) {
|
||||
formhomelist.list = []
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
formhomelist.status = 'loading';
|
||||
if (formhomelist.page == 1) {
|
||||
formhomelist.list = res.records
|
||||
} else {
|
||||
formhomelist.list = [...formhomelist.list, ...res.records];
|
||||
}
|
||||
formhomelist.page = ++formhomelist.page;
|
||||
setTimeout(() => {
|
||||
homelist.value = [...homelist.value, ...res.data.list];
|
||||
if (formhomelist.page > res.totalPage) {
|
||||
formhomelist.status = 'nomore';
|
||||
} else {
|
||||
formhomelist.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
formhomelist.status = 'nomore';
|
||||
} else {
|
||||
formhomelist.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
|
||||
} catch (e) {}
|
||||
}
|
||||
// /筛选数据处理
|
||||
const init_fn = async () => {
|
||||
homelist.value = []
|
||||
formhomelist.list = []
|
||||
Object.assign(formhomelist, {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type: '', //品类
|
||||
orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
|
||||
// orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
|
|
@ -304,11 +307,15 @@
|
|||
onLoadhome()
|
||||
}
|
||||
|
||||
const orderVIP = ref({
|
||||
shopExtendList:''
|
||||
})
|
||||
|
||||
// 弹出层处理
|
||||
const showproductlist = ref(false);
|
||||
// 定义方法
|
||||
const openproductlist = (e) => {
|
||||
hometoplist.menu[viewHistoryindex.value].name = e //下标更改name
|
||||
hometoplist.menuList[viewHistoryindex.value].name = e //下标更改name
|
||||
showproductlist.value = !showproductlist.value
|
||||
}
|
||||
|
||||
|
|
@ -328,7 +335,7 @@
|
|||
}
|
||||
// 是否有弹出层
|
||||
if (item.isChild) {
|
||||
showproductlist.value = showproductlist.value ? viewHistoryindex.value == index ? false : true : !
|
||||
showproductlist.value = showproductlist.value ? (viewHistoryindex.value == index ? false : true) : !
|
||||
showproductlist.value
|
||||
}
|
||||
viewHistoryindex.value = index
|
||||
|
|
@ -338,32 +345,70 @@
|
|||
isSticky.value = res.scrollTop > elementTop.value ? true : false
|
||||
uni.$u.debounce(store.scrollTop = res.scrollTop, 500)
|
||||
});
|
||||
onShow(() => {})
|
||||
onMounted(async () => {
|
||||
await proxy.$onLaunched;
|
||||
console.log(uni.cache.get('shopId'))
|
||||
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
||||
showindex.value = 'shopIndex'
|
||||
let res = await APIshopUserInfo({
|
||||
"shopId": uni.cache.get('shopId'),
|
||||
"userId": uni.getStorageSync('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
//商家信息
|
||||
uni.cache.set('shopUserInfo', res.data)
|
||||
onShow(async () => {
|
||||
try {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: async (res) => {
|
||||
let successres = await APIgeocodelocation({
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
})
|
||||
if (successres) {
|
||||
let datastorage = {
|
||||
country: successres.addressComponent.country, // "中国"
|
||||
province: successres.addressComponent
|
||||
.province, //province: "陕西省"
|
||||
address: successres.addressComponent.city, //district: "西安市"
|
||||
district: successres.addressComponent.district, //district: "未央区"
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
}
|
||||
uni.cache.set('getLocationstorage', datastorage);
|
||||
// 登录
|
||||
proxy.$isResolve()
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
} catch (error) {
|
||||
try {
|
||||
let successres = await APIgeocodelocation({
|
||||
lng: '',
|
||||
lat: '',
|
||||
})
|
||||
if (successres) {
|
||||
let datastorage = {
|
||||
country: successres.addressComponent.country, // "中国"
|
||||
province: successres.addressComponent
|
||||
.province, //province: "陕西省"
|
||||
address: successres.addressComponent.city, //district: "西安市"
|
||||
district: successres.addressComponent.district, //district: "未央区"
|
||||
lng: res.longitude,
|
||||
lat: res.latitude,
|
||||
}
|
||||
uni.cache.set('getLocationstorage', datastorage);
|
||||
proxy.$isResolve()
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
await proxy.$onLaunched;
|
||||
if (uni.cache.get('shopId')) {
|
||||
showindex.value = 'shopIndex'
|
||||
await storeuser.actionsproductqueryProduct()
|
||||
await nextTick()
|
||||
orderVIP.value = uni.cache.get('orderVIP')
|
||||
} else {
|
||||
showindex.value = 'index'
|
||||
hometop()
|
||||
init_fn()
|
||||
showindex.value = 'index'
|
||||
// 获取初始定位高度
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().select('#fourcontent');
|
||||
query.boundingClientRect((rect) => {
|
||||
elementTop.value = rect.top - store.height
|
||||
}).exec();
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
onMounted(async () => {
|
||||
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
|
|
@ -383,16 +428,22 @@
|
|||
background: #F9F9F9;
|
||||
|
||||
.fourcontent {
|
||||
position: sticky;
|
||||
padding: 32rpx 0;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
background: #f9f9f9;
|
||||
margin: 0 32rpx;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
|
||||
.flex-between {
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
.componentsclass {
|
||||
margin-top: 32rpx;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
transition-duration: 350ms;
|
||||
|
|
@ -417,9 +468,9 @@
|
|||
background: #fee06a;
|
||||
}
|
||||
|
||||
.fourcontent_item:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
// .fourcontent_item:nth-child(1) {
|
||||
// margin-left: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="contentbox"
|
||||
:style="'background:url('+(shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png')+') no-repeat center center / cover' ">
|
||||
:style="'background:url('+(shopExtend?shopExtend[0].value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png')+') no-repeat center center / cover' ">
|
||||
<view class="contentboxitem flex-between">
|
||||
<view class="contentboxitemleft flex-colum" @click="scanCodehandle(0)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xdiancan.png" mode="aspectFill">
|
||||
|
|
@ -10,7 +10,8 @@
|
|||
<text class="contentboxitemlefttexttow">在线点不排队</text>
|
||||
</view>
|
||||
<view class="contentboxitemright">
|
||||
<view class="contentboxitemright_item flex-between" @click="memberindex('member/memberdetails')">
|
||||
<view class="contentboxitemright_item flex-between"
|
||||
@click="memberindex('user/member/memberdetails')">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xvip.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="contentboxitemright_itembox flex-colum">
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
<text>入会享权益</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxitemright_item flex-between" @click="memberindex('member/index')">
|
||||
<view class="contentboxitemright_item flex-between" @click="memberindex('user/member/index')">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xchong.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="contentboxitemright_itembox flex-colum">
|
||||
|
|
@ -35,59 +36,29 @@
|
|||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from "vue";
|
||||
import {
|
||||
onShow,
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
APIproductqueryShop
|
||||
} from "@/common/api/product/product.js";
|
||||
import {
|
||||
APIshopExtend
|
||||
} from "@/common/api/index/index.js";
|
||||
reactive,
|
||||
defineProps,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
const shopExtend = reactive({
|
||||
autokey: "index_bg",
|
||||
createTime: "2024-08-27T06:59:35.000+00:00",
|
||||
id: 17,
|
||||
name: "首页",
|
||||
shopId: 29,
|
||||
type: "img",
|
||||
updateTime: null,
|
||||
value: ""
|
||||
})
|
||||
const userInfo = uni.cache.get('userInfo')
|
||||
const shopUserInfo = uni.cache.get('shopUserInfo')
|
||||
// 定义接收的属性
|
||||
const props = defineProps({
|
||||
shopExtend: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
});
|
||||
|
||||
const scanCodehandle = (i) => {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
tableCode: uni.cache.get('tableCode')
|
||||
})
|
||||
// uni.scanCode({
|
||||
// success: async (res) => {
|
||||
// let tableCode = getQueryString(decodeURIComponent(res.result), 'code')
|
||||
// uni.cache.set('tableCode', tableCode)
|
||||
// if (tableCode) {
|
||||
// let data = await APIproductqueryShop({
|
||||
// code: uni.cache.get('tableCode'),
|
||||
// })
|
||||
// if (data.data.shopTableInfo && !data.data.shopTableInfo.choseCount) {
|
||||
// uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
|
||||
// tableCode: tableCode,
|
||||
// shopId: data.data.storeInfo.id,
|
||||
// })
|
||||
// } else {
|
||||
// uni.pro.navigateTo('product/product', {
|
||||
// tableCode: tableCode,
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// fail: () => {}
|
||||
// })
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
const scanCodehandle = async (i) => {
|
||||
const store = productStore();
|
||||
await store.scanCodeactions()
|
||||
}
|
||||
|
||||
|
||||
const memberindex = (url) => {
|
||||
uni.pro.navigateTo(url, {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
|
|
@ -102,13 +73,6 @@
|
|||
}
|
||||
return null;
|
||||
}
|
||||
onShow(async () => {
|
||||
let res = await APIshopExtend({
|
||||
shopId: uni.cache.get('shopId'),
|
||||
autokey: "index_bg" //index_bg my_bg member_bg shopInfo_bg
|
||||
})
|
||||
Object.assign(shopExtend, res.data)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view>
|
||||
<Nav />
|
||||
<Nav v-if="store.scrollTop>=44" />
|
||||
<view class="content">
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -15,7 +15,8 @@
|
|||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow
|
||||
onShow,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app'
|
||||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||||
// pinia管理
|
||||
|
|
@ -24,15 +25,23 @@
|
|||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
|
||||
// 大于44显示导航栏
|
||||
const navScroll = ref(false)
|
||||
|
||||
// 动态更新导航栏配置
|
||||
store.updateNavbarConfig({
|
||||
showBack: true, //左边返回键
|
||||
rightText: '', //右边文字
|
||||
showSearch: true, //true是标题其他事文字
|
||||
title: '我的页面',
|
||||
title: '',
|
||||
isTransparent: false,
|
||||
hasPlaceholder: false //是否要占位符
|
||||
});
|
||||
|
||||
//动态导航栏滑动距离
|
||||
onPageScroll((res) => {
|
||||
uni.$u.debounce(store.scrollTop = res.scrollTop, 500)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -94,9 +94,9 @@
|
|||
type: 'subShop', //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
console.log(res.data.carousel[0])
|
||||
if (res.code == 0) {
|
||||
toplist.value = res.data.carousel[0]
|
||||
console.log(res.carousel[0])
|
||||
if (res) {
|
||||
toplist.value = res.carousel[0]
|
||||
// 动态更新导航栏配置
|
||||
store.updateNavbarConfig({
|
||||
showBack: true, //左边返回键
|
||||
|
|
@ -127,26 +127,26 @@
|
|||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
distanceInKm: '10', //默认10 以经纬度为中心 多大范围以内 单位km
|
||||
distance: '2000', //默认10 以经纬度为中心 多大范围以内 单位km
|
||||
isPage: '', //是否分页 1分页 0不分页
|
||||
page: form.page, //页数
|
||||
size: form.size, //页容量
|
||||
})
|
||||
if (res.data.pages < form.page) {
|
||||
if (res.pages < form.page) {
|
||||
form.status = 'nomore'
|
||||
if (form.page == 1 && res.data.list.length == 0) {
|
||||
if (form.page == 1 && res.list.length == 0) {
|
||||
list.value = []
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
if (form.page == 1) {
|
||||
list.value = res.data.list
|
||||
list.value = res.list
|
||||
} else {
|
||||
list.value = [...list.value, ...res.data.list];
|
||||
list.value = [...list.value, ...res.list];
|
||||
}
|
||||
form.page = ++form.page;
|
||||
if (form.page > res.data.pages) {
|
||||
if (form.page > res.pages) {
|
||||
form.status = 'nomore';
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
});
|
||||
onMounted(() => {
|
||||
init_fn()
|
||||
distiricttopCommon()
|
||||
// distiricttopCommon()
|
||||
})
|
||||
onReachBottom(() => {
|
||||
distirictsubShopList()
|
||||
|
|
@ -246,10 +246,10 @@
|
|||
border-radius: 24rpx 0rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
// .fivecontent_item:nth-child(1) {
|
||||
// margin-top: 0;
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
.fivecontent_item {
|
||||
background: #FFFFFF;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<view class="integral-modal" v-if="visible">
|
||||
<view class="modal-mask" @click="closeModal"></view>
|
||||
<view class="modal-content">
|
||||
<view class="input-wrapper" style="padding-bottom: 100px;">
|
||||
<input type="number" v-model="inputValue" :min="minValue" :max="maxValue" @input="handleInput"
|
||||
:placeholder="instructions" />
|
||||
</view>
|
||||
<!-- <view class="instructions">{{ instructions }}</view> -->
|
||||
<up-button type="primary" @click="confirmIntegral" text="确定"></up-button>
|
||||
<up-button style="margin-top: 20rpx;" @click="IntegralInputclose">取消</up-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
// 定义接收的属性
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
minValue: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
maxValue: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
instructions: {
|
||||
type: String,
|
||||
default: '请输入有效积分值'
|
||||
}
|
||||
});
|
||||
|
||||
// 定义事件发射器
|
||||
const emits = defineEmits(['confirm', 'close', 'IntegralInputclose']);
|
||||
|
||||
// 定义响应式变量
|
||||
const inputValue = ref('');
|
||||
|
||||
// 处理输入事件,确保输入为整数且在有效范围内
|
||||
const handleInput = (e) => {
|
||||
// 兼容不同平台获取输入值的方式
|
||||
let value = e.detail ? e.detail.value : (e.target ? e.target.value : '');
|
||||
// if (value > props.maxValue || value < props.minValue) {
|
||||
// inputValue.value = value > props.maxValue ? props.maxValue : props.minValue
|
||||
// return false;
|
||||
// }
|
||||
// 只允许输入数字,去除非数字字符
|
||||
value = value.replace(/\D/g, '');
|
||||
if (value) {
|
||||
value = parseInt(value, 10);
|
||||
// 限制输入值在最小和最大值之间
|
||||
// if (value < props.minValue) {
|
||||
// value = props.minValue;
|
||||
// } else if (value > props.maxValue) {
|
||||
// value = props.maxValue;
|
||||
// }
|
||||
inputValue.value = value.toString();
|
||||
} else {
|
||||
inputValue.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 确认积分并返回值给父组件
|
||||
const confirmIntegral = () => {
|
||||
if (inputValue.value < props.minValue || inputValue.value > props.maxValue) {
|
||||
uni.showToast({
|
||||
title: '输入的积分值不在有效范围内',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (inputValue.value) {
|
||||
const value = parseInt(inputValue.value, 10);
|
||||
if (value >= props.minValue && value <= props.maxValue) {
|
||||
emits('confirm', value);
|
||||
emits('close');
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '输入的积分值不在有效范围内',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入有效的积分值',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const IntegralInputclose = () => {
|
||||
emits('IntegralInputclose');
|
||||
}
|
||||
|
||||
// 关闭模态框
|
||||
const closeModal = () => {
|
||||
emits('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.integral-modal {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<!-- 充值免单 -->
|
||||
<view class="rechargeFree">
|
||||
<view class="rechargeFree_bg" @click="changeFree">
|
||||
<view class="left">
|
||||
<view class="icon">优惠</view>
|
||||
<view class="text">
|
||||
充值消费{{freeDineConfig.rechargeTimes}}倍(订单满¥{{freeDineConfig.rechargeThreshold}}元可用),本单立享免单!</view>
|
||||
</view>
|
||||
<up-checkbox :disabled="!freeDineConfig.enable" @change="change" shape="circle" usedAlone v-model:checked="changeFreeenable" icon-size="20" size="20">
|
||||
</up-checkbox>
|
||||
<!-- <up-checkbox-group iconPlacement="right">
|
||||
<up-checkbox : v-model="changeFreeenable"
|
||||
:checked="freeDineConfig.enable" @change="change" activeColor="#E8AD7B" shape="circle"
|
||||
icon-size="16" size="16">
|
||||
</up-checkbox>
|
||||
</up-checkbox-group> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
// 定义接收的属性
|
||||
const props = defineProps({
|
||||
freeDineConfig: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
payAmount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['changeFree']);
|
||||
|
||||
const changeFreeenable = ref(false)
|
||||
|
||||
/**
|
||||
* 监听是否免单
|
||||
*/
|
||||
const change = (e) => {
|
||||
emits('changeFree', e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rechargeFree {
|
||||
// padding: 0 20rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.rechargeFree_bg {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 68rpx;
|
||||
height: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
background: linear-gradient(180deg, #FEDE81 0%, #FEB263 100%);
|
||||
border-radius: 12rpx 0rpx 12rpx 0rpx;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 80%;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<!-- 充值活动 -->
|
||||
<view class="topUp" v-if="list.length > 0">
|
||||
<view class="topUpActivity">
|
||||
<view class="topUpActivity_title">充值更划算</view>
|
||||
<view class="content">
|
||||
<view class="content_item" @click="goTopUp(item)" v-for="(item,index) in list" :key="index">
|
||||
<view class="fit">首充优惠</view>
|
||||
<view class="amount">{{ item.amount }}元</view>
|
||||
<view class="zs"><text class="zamount">赠{{ item.giftAmount }}元</text><text class="points">50积分</text></view>
|
||||
<view class="coupon">赠送2张优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
props:{
|
||||
shopUserInfo:{
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.shopUserInfo)
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 去充值
|
||||
*/
|
||||
goTopUp( item ) {
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: "topUpActivity",
|
||||
amount: item.amount,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取充值数据
|
||||
*/
|
||||
async getData () {
|
||||
let res = await this.api.paygetActive({
|
||||
shopId: uni.cache.get('shopId'),
|
||||
page: 1,
|
||||
pageSize: 99
|
||||
})
|
||||
this.list = res.data.list;
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.topUp{
|
||||
box-sizing: border-box;
|
||||
margin-top: 30rpx;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 20rpx;
|
||||
.topUpActivity{
|
||||
background-color: #fff;
|
||||
border-radius: 22rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
.topUpActivity_title{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-top: 32rpx;
|
||||
.content_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: linear-gradient( 180deg, #FFF7E6 0%, #FFFFFF 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 2rpx solid #FEE082;
|
||||
margin-right: 24rpx;
|
||||
padding: 22rpx 42rpx;
|
||||
flex-shrink: 0;
|
||||
.fit{
|
||||
width: 102rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient( 180deg, #FEE082 0%, #FFA158 100%);
|
||||
border-radius: 12rpx 0rpx 12rpx 0rpx;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -14rpx;
|
||||
}
|
||||
.amount{
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.zs{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
text{
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
text:nth-child(1){
|
||||
padding-right: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.coupon{
|
||||
padding: 6rpx 12rpx;
|
||||
background: rgba(250,236,205,0.88);
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #F7955C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,620 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="containertop">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in fromInfo.list" :key="index">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="{'containertopboxitemleft_vip': item.type == 2,'containertopboxitemlefts': fromInfo.status != 1,}">
|
||||
<view class="containertopboxitemleft_one" v-if="Orderinfo.typeOrder == 1"
|
||||
:class="Orderinfo.typeOrder == 1 ?'':'containertopboxitemleft_ones'">
|
||||
<block v-if="item.type == 2">
|
||||
<text>1</text>
|
||||
<text style="font-size: 28rpx;margin-left: 6rpx;">张</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text style="font-size: 28rpx;margin-right: 6rpx;">¥</text>
|
||||
<text>{{item.discountAmount || 0}}</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow"
|
||||
:class="{'containertopboxitemleft_nameVip': item.type == 2}">
|
||||
{{ item.type == 2 ? item.name : '优惠券(元)'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright">
|
||||
<view class="containertopboxitemright_one">
|
||||
<view class="flex-start">
|
||||
<image class="icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/coupon_icon.png"
|
||||
mode="aspectFill"></image>
|
||||
<text class="title">{{ item.shopName }}</text>
|
||||
</view>
|
||||
<!-- 商品卷显示 -->
|
||||
<text v-if="Orderinfo.typeOrder == 2">无门槛使用</text>
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
<view> {{ item.type == 2 ? '会员商品券' : item.name}}</view>
|
||||
<!-- 优惠卷 -->
|
||||
<view @click="navigatorGo(item)" v-if="Orderinfo.typeOrder == 1"
|
||||
class="containertopboxitemright_four containertopboxitemright_btn"
|
||||
style="padding: 10rpx 15rpx;">
|
||||
去使用
|
||||
</view>
|
||||
|
||||
<!-- 商品卷 -->
|
||||
<view @click="clickupicon(item,index)" v-if="Orderinfo.typeOrder == 2 && item.show"
|
||||
class="containertopboxitemright_btn">
|
||||
<up-icon v-if="item.Selected" name="checkmark-circle-fill" color="#2979ff"
|
||||
size="28"></up-icon>
|
||||
<view v-else class="upicon"></view>
|
||||
</view>
|
||||
<view v-if="Orderinfo.typeOrder == 2 && !item.show" class="containertopboxitemright_fours">
|
||||
不可使用
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright_there">
|
||||
有效期至:{{item.endTime}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="fromInfo.list.length <= 0" style="text-align: center;">
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height:120rpx;"></view>
|
||||
|
||||
<view class="btnBox" v-if="Orderinfo.typeOrder == 2">
|
||||
<view class="btn" @click="cancelCoupon">确定</view>
|
||||
</view>
|
||||
<view class="btnBox" v-else>
|
||||
<button style="margin-top: 20rpx;" @click="IntegralInputclose">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
APIcouponfindByUserId,
|
||||
APIfindCoupon
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
const fromInfo = reactive({
|
||||
tabIndex: 0,
|
||||
list: [],
|
||||
status: 1,
|
||||
shopId: null,
|
||||
orderId: null,
|
||||
couopnInfo: null,
|
||||
shoppingCart: [],
|
||||
productList: [],
|
||||
})
|
||||
|
||||
// 判断是选择优惠卷
|
||||
const Orderinfo = reactive({
|
||||
typeOrder: '',
|
||||
shopUserId: "",
|
||||
payAmount: "",
|
||||
shoppingCart: [],
|
||||
show: false
|
||||
})
|
||||
|
||||
// 去使用优惠券
|
||||
const navigatorGo = (item) => {
|
||||
// console.log(Orderinfo.payAmount, item)
|
||||
if (Orderinfo.payAmount < item.fullAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足使用金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (Orderinfo.payAmount < item.discountAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足抵扣金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
uni.$emit('returnData', {
|
||||
typeOrder: Orderinfo.typeOrder,
|
||||
item,
|
||||
});
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 计算合并后的数组 num相加
|
||||
const mergedArray = computed(() => {
|
||||
const map = new Map();
|
||||
Orderinfo.shoppingCart.forEach(item => {
|
||||
if (map.has(item.productId)) {
|
||||
const existingItem = map.get(item.productId);
|
||||
existingItem.num += item.num;
|
||||
} else {
|
||||
map.set(item.productId, {
|
||||
...item
|
||||
});
|
||||
}
|
||||
});
|
||||
return Array.from(map.values());
|
||||
});
|
||||
|
||||
const Selectedlist = ref([])
|
||||
|
||||
// 商品卷
|
||||
const clickupicon = async (item, index) => {
|
||||
lowestPrices.value = []
|
||||
if (!item.show) {
|
||||
return false;
|
||||
}
|
||||
// 查找选中的数组里面 统计指定 id 的重复次数
|
||||
const count = Selectedlist.value.filter(item => item.id === item.id).length;
|
||||
|
||||
// 查找选中的数组里面 统计指定 id 的重复次数
|
||||
const foundObject = mergedArray.value.find(i => i.productId === item.proId)
|
||||
if (foundObject.num <= count) {
|
||||
uni.showToast({
|
||||
title: '不可多余商品!',
|
||||
icon: 'none'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
// 查找选中的数组里面 统计指定 id 的重复次数
|
||||
|
||||
// console.log(mergedArray.value)
|
||||
// console.log(item)
|
||||
// console.log(Selectedlist.value)
|
||||
// console.log(Orderinfo.shoppingCart)
|
||||
// if (Orderinfo.shoppingCart.length <= Selectedlist.value.length) {
|
||||
// uni.showToast({
|
||||
// title: '不可多余下单数!',
|
||||
// icon:'none'
|
||||
// })
|
||||
// return false;
|
||||
// }
|
||||
|
||||
if (item.Selected) {
|
||||
Selectedlist.value = Selectedlist.value.filter(i => i.id !== item.id)
|
||||
} else {
|
||||
// 筛查出最低价格
|
||||
await productmethod()
|
||||
const matchedItem = lowestPrices.value.find(cartItem => cartItem.productId == item.proId);
|
||||
Selectedlist.value.push({
|
||||
...item,
|
||||
price: matchedItem.price,
|
||||
memberPrice: matchedItem.memberPrice
|
||||
})
|
||||
}
|
||||
fromInfo.list[index].Selected = !item.Selected
|
||||
}
|
||||
|
||||
// 这是判断是否符合选中规格
|
||||
const groupByPropertyAndCount = (arr, property) => {
|
||||
// 创建一个空对象来存储每个属性值对应的数量
|
||||
const propertyMap = {};
|
||||
|
||||
// 遍历原始数组
|
||||
arr.forEach(item => {
|
||||
const key = item[property];
|
||||
const num = item.number || 1;
|
||||
if (!propertyMap[key]) {
|
||||
// 如果该属性值还没有在 propertyMap 中,初始化一个对象
|
||||
propertyMap[key] = {
|
||||
value: item[property],
|
||||
count: num
|
||||
};
|
||||
} else {
|
||||
// 如果该属性值已经存在,增加数量
|
||||
propertyMap[key].count += num;
|
||||
}
|
||||
});
|
||||
|
||||
// 将 propertyMap 中的结果转换为数组
|
||||
return Object.values(propertyMap);
|
||||
}
|
||||
|
||||
// 存储每个 productId 对应的最低价格
|
||||
const lowestPrices = ref([]);
|
||||
|
||||
// 筛选出携带的商品是否有相同的商品 productId
|
||||
const productmethod = () => {
|
||||
const groupedProducts = {};
|
||||
// 第一步:将相同 productId 的商品分组
|
||||
Orderinfo.shoppingCart.forEach(product => {
|
||||
const {
|
||||
productId
|
||||
} = product;
|
||||
if (!groupedProducts[productId]) {
|
||||
groupedProducts[productId] = [];
|
||||
}
|
||||
groupedProducts[productId].push(product);
|
||||
});
|
||||
|
||||
// 第二步:遍历每个分组,找出最低价格
|
||||
for (const productId in groupedProducts) {
|
||||
let minPrice = Infinity;
|
||||
let minMemberPrice = Infinity;
|
||||
groupedProducts[productId].forEach(product => {
|
||||
if (product.price < minPrice) {
|
||||
minPrice = product.price;
|
||||
minMemberPrice = product.memberPrice;
|
||||
}
|
||||
});
|
||||
// 将每个 productId 的最低价格信息添加到 lowestPrices 数组中
|
||||
lowestPrices.value.push({
|
||||
productId: Number(productId),
|
||||
price: minPrice,
|
||||
memberPrice: minMemberPrice
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const getCouponList = async () => {
|
||||
let res = await APIfindCoupon({
|
||||
type: Orderinfo.typeOrder,
|
||||
shopUserId: Orderinfo.shopUserId,
|
||||
})
|
||||
|
||||
if (Orderinfo.typeOrder == 2 && res.length>0) {
|
||||
res.forEach((item) => {
|
||||
item.Selected = false
|
||||
})
|
||||
res = res.map(item => {
|
||||
const matchedItem = Orderinfo.shoppingCart.find(cartItem => cartItem.productId == item
|
||||
.proId);
|
||||
const hasMatch = Boolean(matchedItem);
|
||||
return {
|
||||
...item,
|
||||
show: hasMatch,
|
||||
price: hasMatch ? matchedItem.price : undefined,
|
||||
memberPrice: hasMatch ? matchedItem.memberPrice : undefined
|
||||
};
|
||||
});
|
||||
}
|
||||
if (res.length > 0) {
|
||||
fromInfo.list = res
|
||||
} else {
|
||||
fromInfo.list = []
|
||||
return false
|
||||
}
|
||||
}
|
||||
// 商品取消
|
||||
const cancelCoupon = () => {
|
||||
uni.$emit('returnData', Selectedlist.value);
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
// 优惠卷取消
|
||||
const IntegralInputclose = () => {
|
||||
uni.$emit('returnData', {
|
||||
typeOrder: Orderinfo.typeOrder,
|
||||
});
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
|
||||
if (options.shopId) {
|
||||
fromInfo.shopId = options.shopId
|
||||
}
|
||||
|
||||
if (options.type) {
|
||||
Orderinfo.typeOrder = options.type == 'confirm_order_product' ? 2 : 1
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: Orderinfo.typeOrder == 2 ? '商品卷' : '优惠卷',
|
||||
success: () => {},
|
||||
fail: (err) => {}
|
||||
});
|
||||
|
||||
Orderinfo.shopUserId = options.shopUserId
|
||||
Orderinfo.payAmount = options.payAmount
|
||||
console.log(Orderinfo.payAmount)
|
||||
Orderinfo.shoppingCart = JSON.parse(decodeURIComponent(options.shoppingCart))
|
||||
}
|
||||
getCouponList()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
|
||||
.towcontentlistxitem {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentlistxitembox {
|
||||
width: 33.33%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
justify-content: flex-start;
|
||||
height: 50rpx;
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
color: #E3AD7F;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.containertop {
|
||||
padding: 40rpx 32rpx;
|
||||
|
||||
.containertopbox {
|
||||
margin-top: 8rpx;
|
||||
|
||||
.containertopboxitem::after {
|
||||
position: absolute;
|
||||
bottom: 14rpx;
|
||||
left: 14rpx;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/coupontop.png) no-repeat;
|
||||
width: 72.83rpx;
|
||||
height: 77.14rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.containertopboxitem {
|
||||
margin-bottom: 32rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 18rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
overflow: hidden;
|
||||
|
||||
.containertopboxitemleft {
|
||||
position: relative;
|
||||
width: 182rpx;
|
||||
height: 192rpx;
|
||||
background: #E3AD7F;
|
||||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
|
||||
// ::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// bottom: 0rpx;
|
||||
// left: 166rpx;
|
||||
// background: #fff;
|
||||
// display: inline-block;
|
||||
// width: 32rpx;
|
||||
// height: 16rpx;
|
||||
// line-height: 32rpx;
|
||||
// border-radius: 32rpx 32rpx 0 0;
|
||||
// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
||||
// z-index: 999;
|
||||
|
||||
// }
|
||||
|
||||
.containertopboxitemleft_one {
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 60rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_ones {
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_nameVip {
|
||||
color: #967152;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_tows {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemleft::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: 166rpx;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0rpx 1rpx 9rpx 21rpx rgba(0, 0, 0, 0.04);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.containertopboxitemleft::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20rpx;
|
||||
left: 166rpx;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0rpx 0rpx 15rpx 1rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.containertopboxitemleft_vip {
|
||||
background-color: #E1D4B2;
|
||||
}
|
||||
|
||||
.containertopboxitemlefts {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.containertopboxitemright {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
flex: auto;
|
||||
height: 192rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||||
|
||||
.containertopboxitemright_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
padding: 16rpx 0 20rpx 0;
|
||||
border-bottom: 1rpx dashed #707070;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemright_tow {
|
||||
margin-top: 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.containertopboxitemright_there {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.containertopboxitemright_btn {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
|
||||
.upicon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemright_four {
|
||||
color: #FFFFFF;
|
||||
background: #967152;
|
||||
}
|
||||
|
||||
.containertopboxitemright_fours {
|
||||
color: #999999;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 30rpx 50rpx 30rpx;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
background: #E3AD7F;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,521 @@
|
|||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<!-- <view class="navtab flex-center">
|
||||
<view class="navtabpost flex-center">
|
||||
<view :class="navtabindex == 0 ? 'navtabone':'navtabtow'" @click="navtabclick(0)">
|
||||
到店订单
|
||||
</view>
|
||||
<view :class="navtabindex == 1 ? 'navtabone':'navtabtow'" @click="navtabclick(1)">
|
||||
团购订单
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<up-sticky>
|
||||
<view class="tab-wrap">
|
||||
<view class="item" :class="{'active':orderForm.active == index}" v-for="(item, index) in tabs"
|
||||
:key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</up-sticky>
|
||||
<view class="list-wrap" v-if="!orderForm.is_end">
|
||||
<view class="item" v-for="(item,index) in orderForm.list" :key="index" @click="orderinfo(item)">
|
||||
<view class="header-wrap">
|
||||
<view class="header-wrap-left">
|
||||
<text class="sendType" v-if="item.dineMode == 'dine-in'">堂食</text>
|
||||
<text class="sendType" v-if="item.dineMode == 'take-out'">外带</text>
|
||||
<text class="sendType" v-if="item.dineMode == 'take-away'">外卖</text>
|
||||
<text class="shopName"> {{ item.shopName || ''}} </text>
|
||||
</view>
|
||||
|
||||
<text class="status" v-if="item.status == 'unpaid'">
|
||||
<text style="color: #333;">待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'in-production'">
|
||||
<text>制作中</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'wait-out'">
|
||||
<text>待取餐</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'done'">
|
||||
<text> 订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'part-refund'">
|
||||
<text>部分退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view></view>
|
||||
<view class="intro-wrap">
|
||||
下单日期:{{item.createTime}}
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="shop-item">
|
||||
<view class="cover" v-for="(item1,index1) in item.goods" :key="index1">
|
||||
<u-image width="56" height="56" radius="10" :src='item1.productImg'
|
||||
v-if="item1.productId!=-999"></u-image>
|
||||
<u-image width="112" height="112" radius="20"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
|
||||
mode="heightFix" v-else></u-image>
|
||||
<text class="productName"> {{ item1.productName }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-amount">
|
||||
<text
|
||||
class="orderAmount">¥{{item.status == 'unpaid'?item.originAmount:item.orderAmount}}</text>
|
||||
<text class="totalNumber">共{{item.goods.length}}件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="footer-wrap">
|
||||
<view class="btn" @click.stop="$u.debounce(isRemoveOrder(item,index),1000)"
|
||||
v-if="item.status != 'unpaid' && item.status != 'paying'"> 删除订单 </view>
|
||||
<view class="btn s" @click.stop="$u.debounce(showpopupclick(item),1000)"
|
||||
v-if="item.status == 'unpaid' || item.status == 'paying'"> 去付款 </view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-colum" v-if="orderForm.list.length <= 0">
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
|
||||
<text
|
||||
style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;text-align: center;width: 426rpx;line-height: 84rpx; height: 84rpx;background: #E8AD7B;border-radius: 49rpx 49rpx 49rpx 49rpx;"
|
||||
@click="scanCodehandle">
|
||||
去点餐
|
||||
</text>
|
||||
</view>
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<up-loadmore :status="orderForm.form.status" fontSize="14" color="#999" iconSize="14" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||||
import {
|
||||
APIuserorder
|
||||
} from '@/common/api/order/index.js'
|
||||
// pinia管理
|
||||
import {
|
||||
useNavbarStore
|
||||
} from '@/stores/navbarStore';
|
||||
const store = useNavbarStore();
|
||||
|
||||
// 导航栏
|
||||
const tabs = [{
|
||||
name: '全部',
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
name: '待支付',
|
||||
status: 'unpaid'
|
||||
},
|
||||
{
|
||||
name: '订单完成',
|
||||
status: 'done'
|
||||
},
|
||||
{
|
||||
name: '取消订单',
|
||||
status: 'cancelled'
|
||||
},
|
||||
]
|
||||
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
// 初始化是单店还是团购店
|
||||
const navtabindex = ref('2')
|
||||
// 总数据列表
|
||||
const orderForm = reactive({
|
||||
list: [],
|
||||
groupList: [],
|
||||
is_end: false,
|
||||
status: '',
|
||||
active: 0,
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
}
|
||||
})
|
||||
|
||||
// 点击扫码
|
||||
const scanCodehandle = async (i) => {
|
||||
const store = productStore();
|
||||
await store.scanCodeactions()
|
||||
}
|
||||
|
||||
// 单店团购
|
||||
const userorderList = async () => {
|
||||
let res = await APIuserorder({
|
||||
page: orderForm.form.page,
|
||||
size: orderForm.form.size,
|
||||
status: orderForm.status
|
||||
})
|
||||
if (res.totalPage == 0 || res.totalPage == 1 && res.totalRow <= 10) {
|
||||
orderForm.form.status = 'nomore'
|
||||
orderForm.list = res.records
|
||||
if (orderForm.form.page == 1 && res.records.length == 0) {
|
||||
orderForm.records = []
|
||||
orderForm.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
orderForm.form.status = 'loading';
|
||||
if (orderForm.form.page == 1) {
|
||||
orderForm.list = res.records
|
||||
} else {
|
||||
orderForm.list = [...orderForm.list, ...res.records];
|
||||
}
|
||||
orderForm.form.page = ++orderForm.form.page;
|
||||
if (orderForm.form.page > res.totalPage) {
|
||||
orderForm.form.status = 'nomore';
|
||||
} else {
|
||||
orderForm.form.status = 'loading';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const orderswitch = (item, index) => {
|
||||
orderForm.active = index
|
||||
orderForm.status = item.status
|
||||
init_fn()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
const init_fn = () => {
|
||||
orderForm.groupList = []
|
||||
orderForm.is_end = false
|
||||
orderForm.form.page = 1
|
||||
orderForm.form.size = 10
|
||||
orderForm.form.status = 'loadmore'
|
||||
// navtabindex.value == '1' ? getorderList() : userorderList()
|
||||
userorderList()
|
||||
}
|
||||
|
||||
const orderinfo = (e) => {
|
||||
uni.pro.navigateTo('order/detail', {
|
||||
orderId: e.id,
|
||||
shopId: e.shopId
|
||||
})
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (orderForm.form.status != 'nomore') {
|
||||
console.log('页面滚动到底部');
|
||||
userorderList()
|
||||
}
|
||||
})
|
||||
onShow(() => {
|
||||
init_fn()
|
||||
})
|
||||
// onMounted(() => {})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.navtab {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
background: #ffd158;
|
||||
|
||||
.navtabpost {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 10rpx;
|
||||
|
||||
.navtabone {
|
||||
// margin-left: -10rpx;
|
||||
width: 166rpx;
|
||||
height: 36rpx;
|
||||
background: #FFEAB1;
|
||||
border-radius: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navtabtow {
|
||||
// margin-left: -10rpx;
|
||||
z-index: 9;
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
// border-radius: 0 12rpx 12rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
padding: 40rpx 46rpx;
|
||||
border-radius: 0rpx 0rpx 34rpx 34rpx;
|
||||
|
||||
.item {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.item.active {
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 0 28rpx 48rpx 28rpx;
|
||||
position: relative;
|
||||
margin-top: 48rpx;
|
||||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||||
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
padding: 16rpx 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.header-wrap-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sendType {
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #E3AD7F;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #E3AD7F;
|
||||
margin-right: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.shopName {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.status {
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 18rpx 18rpx 18rpx;
|
||||
|
||||
.shop-info {
|
||||
display: flex;
|
||||
|
||||
.shop-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
.cover:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.productName {
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
flex-shrink: 0;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.shop-amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.orderAmount {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.totalNumber {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro-wrap {
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
font-size: 24upx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 18rpx 32rpx 18rpx;
|
||||
|
||||
.btn {
|
||||
width: 128rpx;
|
||||
height: 48rpx;
|
||||
line-height: 43rpx;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #EDEDED;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.s {
|
||||
background: #343030;
|
||||
border: 2rpx solid #EDEDED;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orderList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.listBox {
|
||||
padding: 16rpx 18rpx;
|
||||
margin-top: 48rpx;
|
||||
font-size: 32rpx;
|
||||
width: 694rpx;
|
||||
height: 248rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
position: relative;
|
||||
|
||||
.buttonStyle {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 50rpx;
|
||||
font-size: 28rpx;
|
||||
width: 170rpx;
|
||||
height: 64rpx;
|
||||
background: #FFD100;
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
border: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.state {
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.state2 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.fontStyle {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.df {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/order/orderAMeal.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="content_box">
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
<view class="title_text">请选择就餐人数</view>
|
||||
<view class="title_tabNum">桌号{{shopTable.name}}</view>
|
||||
</view>
|
||||
<view class="num" :class="{'active':numIndex==-1}">
|
||||
<view class="item" @click="tabCut(index)" v-for="(item,index) in 9" :key="index">
|
||||
<view class="num_item" :class="{'active':numIndex==index }">{{index+1}}</view>
|
||||
</view>
|
||||
<view class="item" @click="tabCut(-1)">
|
||||
<view class="num_item" :style="numIndex==-1?'background-color: #E8AD7B;':'' ">
|
||||
<up--input v-model="otherNum" @input="isOtherNum" @blur="blur()" border="none" type="nubmer"
|
||||
maxlength="3" placeholder='请输入..'></up--input>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="num_item" v-else :class="{'active':numIndex==-1 }">其</view> -->
|
||||
</view>
|
||||
<view class="startBtn" @click="start">
|
||||
开始点餐
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<Loading :isLoading="isLoading" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
nextTick
|
||||
} from 'vue'
|
||||
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
Storelogin
|
||||
} from '@/stores/user.js';
|
||||
|
||||
import Loading from '@/components/Loading.vue';
|
||||
|
||||
// 获取全局属性
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
// 初始加载中
|
||||
const isLoading = ref(true);
|
||||
|
||||
const otherNum = ref('')
|
||||
|
||||
const numIndex = ref(0)
|
||||
|
||||
const dinersNum = ref(1)
|
||||
|
||||
const isOtherNum = (e) => {
|
||||
otherNum.value = otherNum.value.replace(/\D/g, '')
|
||||
}
|
||||
|
||||
const tableCode = uni.cache.get('tableCode')
|
||||
|
||||
// 切换桌型
|
||||
const tabCut = (index) => {
|
||||
console.log(index)
|
||||
numIndex.value = index;
|
||||
if (index != -1) {
|
||||
dinersNum.value = index + 1;
|
||||
} else {
|
||||
otherNum.value = otherNum.value == "其他" ? "" : otherNum.value
|
||||
}
|
||||
}
|
||||
|
||||
const blur = (index) => {
|
||||
otherNum.value = otherNum.value == "" ? "其他" : otherNum.value
|
||||
}
|
||||
|
||||
const shopTable = uni.cache.get('shopTable')
|
||||
|
||||
const start = async () => {
|
||||
if (numIndex.value == -1 && (otherNum.value == "其他" || otherNum.value <= 0)) {
|
||||
uni.showToast({
|
||||
title: '请选择就餐人数',
|
||||
icon: 'none',
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (numIndex.value == -1 && otherNum.value != "其他") {
|
||||
dinersNum.value = otherNum.value
|
||||
}
|
||||
if (shopTable.useNum < dinersNum.value && shopTable.useNum > 0) {
|
||||
uni.showToast({
|
||||
title: `最多${shopTable.useNum}人`,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
uni.cache.set('dinersNum', dinersNum.value)
|
||||
uni.pro.redirectTo('product/index')
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await proxy.$onLaunched;
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
// #ifdef MP-WEIXIN
|
||||
if (options.q) {
|
||||
const store = productStore();
|
||||
await store.scanCodeactions(options.q)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (getApp().globalData.tableCode) {
|
||||
await store.scanCodeactions(getApp().globalData.tableCode)
|
||||
}
|
||||
// #endif
|
||||
await nextTick()
|
||||
isLoading.value = uni.cache.get('shopInfo').isTableFee == 0 ? false : true
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
// background: #f6f6f6;
|
||||
}
|
||||
|
||||
.top_bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
width: 100%;
|
||||
padding: 0 28rpx;
|
||||
position: absolute;
|
||||
bottom: 148rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 48rpx 0 32rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 44rpx 44rpx 44rpx 44rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 48rpx;
|
||||
padding-right: 32rpx;
|
||||
|
||||
.title_text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title_tabNum {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 20%;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
|
||||
.num_item {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
margin-right: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
background-color: #FEF4EB;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.num_item:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-input {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
background-color: #FEF4EB;
|
||||
border-radius: 12rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep input {
|
||||
font-weight: 400;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
text-align: center !important;
|
||||
background-color: #FEF4EB;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: #E8AD7B;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep .num.active .u-input {
|
||||
width: 100%;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 32rpx;
|
||||
background-color: #E8AD7B !important;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
::v-deep .num.active input {
|
||||
color: #fff !important;
|
||||
border-radius: 12rpx;
|
||||
background-color: #E8AD7B !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.startBtn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background-color: #E8AD7B;
|
||||
border-radius: 48rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 店铺详情 -->
|
||||
<up-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
|
||||
<view class="shop-info-wrap">
|
||||
<view class="info-wrap flex-between">
|
||||
<view></view>
|
||||
<text class="shopName">{{ shopInfo.shopName }}</text>
|
||||
<view class="close" @click="showShopInfo = false">
|
||||
<up-icon name="close" color="#999999" size="16"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap-title">商家信息</view>
|
||||
<view class="row" style="margin-bottom: 20rpx;">
|
||||
<view class="col">
|
||||
<text class="l">营业时间:</text>
|
||||
<text
|
||||
class="t">{{ (shopInfo.businessStartDay || '--') +'至'+ (shopInfo.businessEndDay || '--') +' '+ (shopInfo.businessTime || '')}}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
<text class="l">商家地址:</text>
|
||||
<text class="t">{{ shopInfo.address }}</text>
|
||||
</view>
|
||||
<view class="col" @click="makePhoneCall(shopInfo.phone)">
|
||||
<text class="l">商家电话:</text>
|
||||
<text class="t">{{ shopInfo.phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap-title">商家公告</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
<text class="l">公告:</text>
|
||||
<text class="t">{{ shopInfo.detail }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineExpose
|
||||
} from "vue";
|
||||
//店铺详情
|
||||
const showShopInfo = ref(false)
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
|
||||
const childMethod = () => {
|
||||
showShopInfo.value = !showShopInfo.value
|
||||
};
|
||||
defineExpose({
|
||||
childMethod
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shop-info-wrap {
|
||||
padding: 0 30rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info-wrap {
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shopName {
|
||||
align-self: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.row {
|
||||
.col {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.l,
|
||||
.t {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<view class="iconBox">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
|
||||
mode="aspectFill" @click="isOpen">
|
||||
</image>
|
||||
<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
|
||||
</view>
|
||||
|
||||
<text class="i">¥</text>
|
||||
<text class="num"
|
||||
v-if="shopInfo.isVip == 1 && cartLists.memberAmount > 0">{{cartLists.memberAmount||'0.00'}}</text>
|
||||
<text class="num" v-else>{{cartLists.amount||'0.00'}}</text>
|
||||
</view>
|
||||
<view class="btn" @tap="$u.debounce(orderdetail, 500)">
|
||||
<text class="t">去结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
} from 'vue'
|
||||
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
const cartListsdatashow = ref(false)
|
||||
const showCart = ref(false)
|
||||
const orderdetail = () => {
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pagesOrder/confirm_order/index?storeInfo=${encodeURIComponent(JSON.stringify(this.storeInfo))}&cartLists=${JSON.stringify(this.cartLists)}&tableCode=${this.tableCode||''}`
|
||||
});
|
||||
|
||||
}
|
||||
const isOpen = () => {
|
||||
showCart.value = !showCart.value
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart-wrap {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
|
||||
.cart-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 128rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
|
||||
border-radius: 58rpx;
|
||||
padding: 0 36rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.iconBox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 76rpx;
|
||||
height: 88rpx;
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
|
||||
.u-badge {
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
right: -30rpx;
|
||||
background-color: #FF4B33;
|
||||
color: #fff;
|
||||
border-radius: 58rpx;
|
||||
padding: 5rpx 14rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.i,
|
||||
.num {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
position: relative;
|
||||
top: 4upx;
|
||||
margin-left: 64rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
width: 160rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
background: #E7AE7B;
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
border: 2rpx solid #E8AD7B;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,880 @@
|
|||
<template>
|
||||
<view>
|
||||
<up-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
|
||||
@close="close">
|
||||
<view class="cart-list-wrap">
|
||||
<!-- <view class="cart-header flex-between">
|
||||
<view class="num">已点 {{ cartLists_count }} 份</view>
|
||||
<view class="clear" @click="cartclear">
|
||||
<up-icon name="trash" color="#999"></up-icon>
|
||||
<text class="t">清空</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<scroll-view scroll-y class="scroll-view">
|
||||
<view class="list-wrap">
|
||||
<view v-if="cartList.length>0">
|
||||
<view class="ShoppingCart flex-between">
|
||||
<view>
|
||||
购物车
|
||||
</view>
|
||||
<view class="flex-between" @click="cartclear">
|
||||
<up-icon name="trash" color="#999" size="20"></up-icon>
|
||||
<text class="t">清空购物车</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="shop-item" v-for="(item,index) in cartList" :key="item.id">
|
||||
<view class="shop-item-content">
|
||||
<view class="cover" v-if="item.productId!=-999">
|
||||
<up-image :src="item.coverImg" width="80" radius="10" height="80"></up-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="name"> {{item.cartListinfo.is_temporary == 1?'临时菜' :item.name }}
|
||||
</view>
|
||||
<view class="select-sku-wrap" v-if="item.type == 'sku'">
|
||||
<text v-for="i in item.skuList" :key="i.id">
|
||||
{{item.cartListinfo.sku_id == i.id? i.name:"" }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="select-sku-wrap" v-if="item.type == 'package'">
|
||||
<view v-for="(a,b) in dataprocessing(item.cartListinfo)" :key="b">
|
||||
<!-- <view>{{a.title}}</view> -->
|
||||
<text v-for="i in a.goods" :key="i.proId" style="margin-left: 4rpx;">
|
||||
{{i.proName }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-wrap" style="padding-top: 0;">
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<!-- 会员价与价格 -->
|
||||
<text class="price" v-if="item.type == 'sku'">
|
||||
<text v-for="i in item.skuList" :key="i.id">
|
||||
<!-- -->
|
||||
{{item.cartListinfo.sku_id == i.id?(shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(i.memberPrice || i.salePrice):i.salePrice):''}}
|
||||
</text>
|
||||
</text>
|
||||
<text class="price" v-else>
|
||||
{{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(item.memberPrice || item.salePrice):item.salePrice}}
|
||||
</text>
|
||||
<!-- <text class="originalprice"
|
||||
v-if="item.originPrice">¥{{item.originPrice}}</text>
|
||||
<text class="unit" v-if="item.unitName">/{{item.unitName}}</text> -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="operation-wrap">
|
||||
<view class="btn">
|
||||
<up-icon name="minus-circle-fill" size="25"></up-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,'-')"></view>
|
||||
</view>
|
||||
<text class="num">{{ ifcartNumber(item) }}</text>
|
||||
<view class="btn" v-if="item.type !='package'">
|
||||
<!-- <up-icon name="plus-circle-fill"
|
||||
:color="{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1? '#CECECE' : '#E9AB7A'"
|
||||
size="25"></up-icon> -->
|
||||
<up-icon name="plus-circle-fill" color="#E9AB7A"
|
||||
size="25"></up-icon>
|
||||
<view class="btnClick" @click="cartListadd(item,'+')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 历史订单 -->
|
||||
<view class="card" v-if="orderinfo.detailMap">
|
||||
<!-- 订单头部 -->
|
||||
<view class="cardcalorders flex-between">
|
||||
<!-- ··· 历史订单 ··· -->
|
||||
<text>待支付订单</text>
|
||||
<view class="flex-start">
|
||||
<up-icon name="trash" color="#999" size="20"></up-icon>
|
||||
<text style="color:' #999;'" @click="clickcancelOrder('all')">清空历史订单</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_item" v-for="(value, key) in orderinfo.detailMap" :key="key">
|
||||
<view class="head">
|
||||
<view class="head_left">
|
||||
<text class="placeNum">第{{key}}次下单</text>
|
||||
<view class="placeTime flex-start">
|
||||
<up-icon name="trash" color="#999"></up-icon>
|
||||
<text class="t" @click="clickcancelOrder('Single',key)">清空</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单详情 -->
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="item in value" :key="item.id">
|
||||
<view class="cover">
|
||||
<up-image width="80" radius="10" height="80" :src="item.productImg"
|
||||
v-if="item.productId!=-999"></up-image>
|
||||
<up-image width="80" radius="10" height="80"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
|
||||
mode="heightFix" v-else></up-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="productName">{{item.productName}}</text>
|
||||
<text class="productSkuName" v-if="item.skuName">{{item.skuName}}</text>
|
||||
</view>
|
||||
|
||||
<view class="price">
|
||||
<view class="priceAmount">
|
||||
¥{{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(item.memberPrice||item.price):item.price}}
|
||||
</view>
|
||||
<view class="num">x{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="semicircle_icon" v-if="index > 0">
|
||||
<view class="semicircle_left_icon"></view>
|
||||
<view class="semicircle_right_icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
defineProps,
|
||||
computed,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
// 定义自定义事件
|
||||
const emits = defineEmits(['customevent', 'close', 'clickcancelOrder']);
|
||||
|
||||
const props = defineProps({
|
||||
cartList: {
|
||||
type: Array
|
||||
},
|
||||
cartLists_count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showCart: {
|
||||
type: Boolean
|
||||
},
|
||||
orderinfo: {
|
||||
type: Object,
|
||||
default: {
|
||||
detailMap: {}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
const shopInfo = uni.cache.get('shopInfo')
|
||||
|
||||
// 定义 ifcartNumber 计算属性方法
|
||||
const ifcartNumber = computed(() => {
|
||||
return (item) => {
|
||||
// 如果 item 为空或者 cartNumber 不是字符串类型,返回 0
|
||||
if (!item || typeof item.cartNumber !== 'string') {
|
||||
return 0;
|
||||
}
|
||||
let numValue = parseFloat(item.cartNumber);
|
||||
if (isNaN(numValue)) {
|
||||
// 如果转换结果是 NaN,说明 cartNumber 不是有效的数字字符串,返回 0
|
||||
return 0;
|
||||
}
|
||||
// type string 商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
|
||||
if (item.type === 'weight') {
|
||||
// 如果类型是称重重量,将值保留两位小数
|
||||
return parseFloat(numValue.toFixed(2));
|
||||
} else {
|
||||
// 如果类型是整数,将值转换为整数
|
||||
return Math.round(numValue);
|
||||
}
|
||||
// 如果类型不匹配,返回原始值
|
||||
return item.cartNumber;
|
||||
};
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emits("close", false)
|
||||
}
|
||||
// 购物车加减
|
||||
const cartListadd = async (item, i) => {
|
||||
// 是否起售 如果小于或者大于都是1
|
||||
const cartNumberFloat = parseFloat(item.cartNumber);
|
||||
const suitNum = item.suitNum >= cartNumberFloat && i == '-' ? item.cartNumber : 1;
|
||||
|
||||
emits('customevent', {
|
||||
id: item.cartListId ? item.cartListId : '',
|
||||
type: 'shopping',
|
||||
table_code: uni.cache.get('tableCode'),
|
||||
shop_id: uni.cache.get('shopId'),
|
||||
operate_type: calculateValue(item.cartNumber, i, suitNum) == 'del' ? 'del' : item.cartListId &&
|
||||
item.cartNumber > 0 ? 'edit' : 'add',
|
||||
product_id: item.id,
|
||||
sku_id: item.skuId,
|
||||
number: await calculateValue(item.cartNumber, i, suitNum),
|
||||
is_print: 1,
|
||||
suitNum: item.suitNum,
|
||||
})
|
||||
}
|
||||
|
||||
const dataprocessing = computed(() => {
|
||||
return (item) => {
|
||||
let res = null
|
||||
try {
|
||||
res = JSON.parse(item.pro_group_info)
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
return res
|
||||
};
|
||||
})
|
||||
|
||||
const clickcancelOrder = (i, key) => {
|
||||
emits('clickcancelOrder', {
|
||||
i,
|
||||
key
|
||||
})
|
||||
emits('customevent', {
|
||||
type: 'shopping',
|
||||
table_code: uni.cache.get('tableCode'),
|
||||
shop_id: uni.cache.get('shopId'),
|
||||
operate_type: 'clearOrder',
|
||||
})
|
||||
}
|
||||
|
||||
const calculateValue = (cartNumber, i, step = 1) => {
|
||||
if (i == '+') {
|
||||
const result = parseFloat(cartNumber) + parseFloat(step);
|
||||
return result.toFixed(2);
|
||||
} else {
|
||||
// 当减到0返回del
|
||||
const result = parseFloat(cartNumber) - parseFloat(step);
|
||||
return result == 0 ? 'del' : result.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
// 菜品备注修改
|
||||
const productBlur = (item) => {
|
||||
let params = {
|
||||
"skuId": item.skuId,
|
||||
"num": item.number, //数量
|
||||
"type": item.type,
|
||||
"isVip": item.isVip,
|
||||
"productId": item.productId, //商品id
|
||||
"note": item.note,
|
||||
"shopId": this.shopId,
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
"tableId": this.tableCode,
|
||||
}
|
||||
this.$emit("addCart", params)
|
||||
}
|
||||
|
||||
// 清空购物车
|
||||
const cartclear = () => {
|
||||
emits('customevent', {
|
||||
type: 'shopping',
|
||||
table_code: uni.cache.get('tableCode'),
|
||||
shop_id: uni.cache.get('shopId'),
|
||||
operate_type: 'cleanup',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart-list-wrap {
|
||||
.cart-header {
|
||||
display: flex;
|
||||
height: 72rpx;
|
||||
background-color: #F2F2F2;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 28rpx;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
|
||||
.num {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
margin-left: 4upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
max-height: 60vh;
|
||||
margin-bottom: 190rpx;
|
||||
|
||||
.list-wrap {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.ShoppingCart {
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
padding: 20rpx 0;
|
||||
font-weight: 700;
|
||||
border-bottom: 1rpx solid #cecece;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
|
||||
.shop-item:last-child {
|
||||
border-bottom: 1rpx solid #cecece;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.shop-item {
|
||||
margin-top: 15rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.shop-item-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shop-item-remark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 180rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.langcover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.langcover::after {
|
||||
content: '加载中..';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #e8e8e8;
|
||||
color: #6b6b6b;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 180rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.select-sku-wrap {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.i,
|
||||
.num {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.i {
|
||||
position: relative;
|
||||
bottom: 4upx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.originalprice {
|
||||
margin-left: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.lineThrough {
|
||||
font-weight: normal;
|
||||
text-decoration: line-through;
|
||||
color: #999 !important;
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sku-wrap {
|
||||
padding: 6upx 16upx;
|
||||
background-color: #ffd100;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20upx;
|
||||
position: absolute;
|
||||
padding: 2upx 12upx;
|
||||
border-radius: 8upx;
|
||||
background-color: #eb5232;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: -14upx;
|
||||
right: -8upx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.operation-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
font-size: 32upx;
|
||||
padding: 0 16upx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.btnClick {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
// bottom: 0;
|
||||
}
|
||||
|
||||
.btnClick.l {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.btnClick.r {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
|
||||
.cardcalorders {
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
border-bottom: 1rpx solid #cecece;
|
||||
color: #000;
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.head_left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #cecece;
|
||||
|
||||
.placeNum {
|
||||
font-weight: 700;
|
||||
font-size: 27rpx;
|
||||
color: #3e3d3d;
|
||||
}
|
||||
|
||||
.placeTime {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
|
||||
.t {
|
||||
margin-left: 4rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
border-bottom: 2rpx dashed #e5e5e5;
|
||||
|
||||
|
||||
.item {
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 16upx;
|
||||
|
||||
.productName {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.productSkuName {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.priceAmount {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 26rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
align-self: flex-end;
|
||||
width: 92rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background: #999999;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.totalAmount {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 2rpx dashed #e5e5e5;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.semicircle_icon {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: -22.5rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.semicircle_left_icon {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
margin-left: -22.5rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 50%;
|
||||
// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
|
||||
|
||||
}
|
||||
|
||||
.semicircle_right_icon {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
margin-right: -22.5rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 50%;
|
||||
// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 34rpx 0 34rpx;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.val {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: 2rpx dashed #e5e5e5;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-right: 42rpx;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.val.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.productCoupon {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin: 0 0 10rpx 0;
|
||||
|
||||
.name {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 0 30rpx;
|
||||
line-height: 20rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favorable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 26rpx;
|
||||
padding-top: 26rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
|
||||
.favorable_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.favorable_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.favorable_right_text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 400rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.favorable_right {
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
.favorable_right_text {
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
text:nth-child(3) {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.favorable_right.column {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.favorable.column {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cell-item.column {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
padding: 0 34rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 64rpx;
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order_footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 34rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,678 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<block v-if="dataform.queueInfo">
|
||||
<view class="result"
|
||||
style="background: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_su_bg.png') no-repeat center 26rpx / 96%;">
|
||||
<view class="head">
|
||||
<u-icon name="checkmark-circle-fill" color="#fff" size="40"></u-icon>
|
||||
<view class="title">排队成功</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="center_top">
|
||||
<view class="shopName">{{dataform.shopInfo.shopName}}</view>
|
||||
<view class="tip">当前门店</view>
|
||||
</view>
|
||||
<view class="sort">{{dataform.queueInfo.callNum}}</view>
|
||||
<view class="note">{{dataform.queueInfo.tableName}}{{dataform.queueInfo.tableNote||''}}</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="footer_item">
|
||||
<view class="footer_item_top"><text>{{dataform.queueInfo.waitingCount}}</text><text>桌</text>
|
||||
</view>
|
||||
<view class="footer_item_bom">前方等待桌数</view>
|
||||
</view>
|
||||
<view class="footer_item">
|
||||
<view class="footer_item_top"><text>≥{{dataform.queueInfo.waitTime || 0}}</text><text>分钟</text>
|
||||
</view>
|
||||
<view class="footer_item_bom">预计等待时长</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="result_btn">
|
||||
<view class="subscribe" @click="subscribe">
|
||||
订阅通知
|
||||
</view>
|
||||
<view class="cancelBtn" @click="cancelTakeNumber">
|
||||
取消排队
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_bg.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="content">
|
||||
<image class="top_img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_img.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="head">
|
||||
<image class="avatar" :src="dataform.shopInfo.logo" mode="aspectFill"></image>
|
||||
<view class="head_text">
|
||||
<text class="shopName">{{dataform.shopInfo.shopName}}</text>
|
||||
<text class="tip">{{dataform.shopInfo.status == 1 ? '营业中' : '休息中'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="center_head">
|
||||
<text>餐桌类型</text>
|
||||
<text>等待桌数</text>
|
||||
<text>预计等待</text>
|
||||
</view>
|
||||
<view class="center_list" v-for="(item,index) in tableList" :key="index">
|
||||
<view class="w center_list_item">
|
||||
<text>{{item.name||''}}</text>
|
||||
<text>{{item.note||''}}</text>
|
||||
</view>
|
||||
<view class="w center_list_item">
|
||||
<text>{{item.nearNum}}</text>
|
||||
<text>桌</text>
|
||||
</view>
|
||||
<view class="w time">约{{item.waitTime}}分钟</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="addBtn" @click="dataform.show = true" v-if="dataform.shopInfo.status == 1">
|
||||
立即排队
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 立即排队 -->
|
||||
<up-popup :show="dataform.show" mode="center" @close="close" round="18" :safeAreaInsetBottom="false">
|
||||
<view class="add_content">
|
||||
<view class="head">
|
||||
<view></view>
|
||||
<view class="title">取号</view>
|
||||
<u-icon name="close-circle-fill" color="#666" size="30" @click="close"></u-icon>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view>
|
||||
<view class="title">选择桌型</view>
|
||||
<view class="tablelist">
|
||||
|
||||
<view class="tablelist_item" :class="{'active': item.id == dataform.callTableId }"
|
||||
v-for="(item,index) in tableList" :key="index" @click="tableCut(item)">
|
||||
<view>{{item.name||''}}</view>
|
||||
<view>{{item.note||''}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="title">手机号码</view>
|
||||
<u--input type="number" placeholder="填写号码" border="surround"
|
||||
v-model="dataform.phone"></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view @click="close">取消</view>
|
||||
<view @click="getTakeNumber">确认取号</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
onShow
|
||||
} from 'vue';
|
||||
|
||||
//接口引入
|
||||
import {
|
||||
APIcallTabletakeNumber,
|
||||
APIusercallTable,
|
||||
APIqueuecallTable,
|
||||
APIqueuedetail,
|
||||
APIcallTablesubMsg,
|
||||
APIqueuecancel
|
||||
} from "@/common/api/subscribeto.js";
|
||||
|
||||
// 获取全局属性
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
|
||||
const queueUpList = ref([])
|
||||
|
||||
const tableList = ref([])
|
||||
|
||||
const dataform = reactive({
|
||||
show: false,
|
||||
phone: "",
|
||||
callTableId: "",
|
||||
shopInfo: {
|
||||
shopName: ''
|
||||
},
|
||||
queueInfo: null,
|
||||
shopId: 29,
|
||||
queueId: "",
|
||||
})
|
||||
|
||||
// 解码
|
||||
const getQueryString = (url, name) => {
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取排号列表
|
||||
const userorderList = async () => {
|
||||
let res = await APIusercallTable({
|
||||
shopId: dataform.shopId,
|
||||
queueId: dataform.queueId
|
||||
})
|
||||
tableList.value = res.records
|
||||
}
|
||||
|
||||
// 叫号队列详情
|
||||
const getQueueUpTablList = async () => {
|
||||
let res = await APIqueuedetail({
|
||||
shopId: dataform.shopId,
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
})
|
||||
if (res.queueInfo) {
|
||||
dataform.queueInfo = res.queueInfo;
|
||||
} else {
|
||||
dataform.queueInfo = null
|
||||
userorderList()
|
||||
}
|
||||
dataform.shopInfo = res.shopInfo;
|
||||
}
|
||||
|
||||
// 订阅通知
|
||||
const subscribe = async () => {
|
||||
let res = await APIcallTablesubMsg({
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
shopId: dataform.shopId,
|
||||
queueId: dataform.queueInfo.id,
|
||||
})
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '订阅成功',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
|
||||
"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
|
||||
"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
|
||||
],
|
||||
complete() {
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 取号
|
||||
const getTakeNumber = async () => {
|
||||
if (dataform.phone == "" || dataform.phone == null) {
|
||||
uni.showToast({
|
||||
title: '请填写手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let res = await APIcallTabletakeNumber({
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
shopId: dataform.shopId,
|
||||
phone: dataform.phone,
|
||||
callTableId: dataform.callTableId,
|
||||
})
|
||||
if (res) {
|
||||
dataform.phone = "";
|
||||
dataform.queueId = res.id;
|
||||
dataform.show = false;
|
||||
getQueueUpTablList()
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
|
||||
"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
|
||||
"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
|
||||
],
|
||||
complete() {
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 取消排队
|
||||
const cancelTakeNumber = async () => {
|
||||
let res = await APIqueuecancel({
|
||||
queueId: dataform.queueInfo.id,
|
||||
shopId: dataform.shopId,
|
||||
})
|
||||
getQueueUpTablList();
|
||||
}
|
||||
|
||||
// 切换桌型
|
||||
const tableCut = (item) => {
|
||||
dataform.callTableId = item.id;
|
||||
}
|
||||
|
||||
// 弹窗关闭监听
|
||||
const close = async () => {
|
||||
dataform.phone = "";
|
||||
if (tableList.value.length > 0) {
|
||||
dataform.callTableId = tableList.value[0].id;
|
||||
}
|
||||
dataform.show = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await proxy.$onLaunched;
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (options.q) {
|
||||
dataform.shopId = getQueryString(decodeURIComponent(options.q), 'shopId')
|
||||
dataform.queueId = getQueryString(decodeURIComponent(options.q), 'queueId')
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (getApp().globalData.shopId) {
|
||||
dataform.shopId = getApp().globalData.shopId
|
||||
}
|
||||
if (getApp().globalData.queueId) {
|
||||
dataform.queueId = getApp().globalData.queueId
|
||||
}
|
||||
// #endif
|
||||
uni.cache.set('shopId', dataform.shopId, 30)
|
||||
await nextTick()
|
||||
getQueueUpTablList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
// background: #f6f6f6;
|
||||
}
|
||||
|
||||
.top_bg {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 48rpx 32rpx;
|
||||
|
||||
.top_img {
|
||||
width: 282rpx;
|
||||
height: 222rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 26rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.head_text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.shopName {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
background: #F6FAFF;
|
||||
border-radius: 4rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #318AFE;
|
||||
padding: 4rpx 10rpx;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
background-color: #fff;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 48rpx;
|
||||
|
||||
.center_head {
|
||||
height: 104rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #FAFAFA;
|
||||
border-radius: 18rpx 18rpx 0rpx 0rpx;
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.center_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 0;
|
||||
|
||||
.w {
|
||||
width: 33.333%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center_list_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 530rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background: #000000;
|
||||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
margin: 16rpx auto 64rpx auto;
|
||||
}
|
||||
|
||||
|
||||
.add_content {
|
||||
width: 594rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32rpx;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.tablelist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tablelist_item {
|
||||
min-width: 200rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
margin-right: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
view:nth-child(1) {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
padding: 24rpx 0 16rpx 0;
|
||||
border-bottom: 1rpx dashed #E5E5E5;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 16rpx 0 24rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2rpx solid #FFB562;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
|
||||
view {
|
||||
width: 50%;
|
||||
height: 94rpx;
|
||||
line-height: 94rpx;
|
||||
text-align: center;
|
||||
border-top: 1rpx solid #E5E5E5;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
color: #999999;
|
||||
border-right: 1rpx solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
padding: 32rpx 20rpx 32rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.result_bg {
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
height: 192rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.center_top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 74rpx;
|
||||
|
||||
.shopName {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 4rpx 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 18rpx;
|
||||
color: #333333;
|
||||
background-color: #E1E1E1;
|
||||
border-radius: 4rpx
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 80rpx;
|
||||
color: #333333;
|
||||
margin-top: 104rpx;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
margin-top: 44rpx;
|
||||
margin-bottom: 84rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1rpx dashed #E5E5E5;
|
||||
padding-top: 70rpx;
|
||||
display: flex;
|
||||
margin-bottom: 64rpx;
|
||||
|
||||
.footer_item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.footer_item_top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 64rpx;
|
||||
color: #FFB562;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer_item_bom {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer_item:nth-child(1) .footer_item_top {
|
||||
border-right: 1rpx solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
|
||||
.result_btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
view {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 56rpx;
|
||||
border: 2rpx solid #333333;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subscribe {
|
||||
width: 336rpx;
|
||||
margin: 64rpx auto;
|
||||
}
|
||||
|
||||
.cancelBtn {
|
||||
width: 336rpx;
|
||||
|
||||
|
||||
|
||||
margin: 64rpx auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,27 +2,26 @@
|
|||
<view class="container">
|
||||
<view class="towcontent">
|
||||
<view class="towcontentlistxitem flex-start">
|
||||
<view class="towcontentlistxitembox flex-colum"
|
||||
:class="tabIndex == item.type?'towcontentlistxitemboxopacity':''" v-for="(item,index) in tabList"
|
||||
:key="index" @click="towcontentclick(item)">
|
||||
<view class="towcontentlistxitembox flex-colum" v-for="(item,index) in tabList" :key="index"
|
||||
@click="towcontentclick(item)"
|
||||
:class="fromInfo.tabIndex == item.status?'towcontentlistxitemboxopacity':''">
|
||||
<text class="title">{{item.name}}</text>
|
||||
<image v-if="tabIndex == item.type"
|
||||
<image v-if="fromInfo.tabIndex == item.status"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dg.png" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="containertop"
|
||||
:class="{select: type == 'confirm_order_coupon' || type == 'confirm_order_product' || type == 'orderInfo_coupon' || type == 'orderInfo_product'}">
|
||||
<view class="containertop">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in list" :key="index">
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in fromInfo.list" :key="index">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="{'containertopboxitemleft_vip': item.type == 2,'containertopboxitemlefts': status != 1,}">
|
||||
:class="{'containertopboxitemleft_vip': item.type == 2,'containertopboxitemlefts': fromInfo.status == 0}">
|
||||
<view class="containertopboxitemleft_one"
|
||||
:class="status == 1?'':'containertopboxitemleft_ones'">
|
||||
:class="fromInfo.status != 0?'':'containertopboxitemleft_ones'">
|
||||
<block v-if="item.type == 2">
|
||||
<text>{{item.num || 0}}</text>
|
||||
<text>1</text>
|
||||
<text style="font-size: 28rpx;margin-left: 6rpx;">张</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow" :class="{
|
||||
'containertopboxitemleft_tows': status != 1,
|
||||
'containertopboxitemleft_tows': fromInfo.status == 0,
|
||||
'containertopboxitemleft_nameVip': item.type == 2,
|
||||
}">
|
||||
{{ item.type == 2 ? item.name : '优惠券(元)'}}
|
||||
|
|
@ -44,16 +43,16 @@
|
|||
<view class="flex-start">
|
||||
<image class="icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/coupon_icon.png"
|
||||
mode="aspectFill">
|
||||
<text class="title">{{ item.shopName }}</text>
|
||||
mode="aspectFill"></image>
|
||||
<text class="title">{{ item.shopName }}</text>
|
||||
</view>
|
||||
<text>无门槛使用</text>
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
<view> {{ item.type == 2 ? '会员商品券' : item.name}}</view>
|
||||
<view @click="navigatorGo(item)"
|
||||
:class="status == 1?'containertopboxitemright_four containertopboxitemright_btn':'containertopboxitemright_fours containertopboxitemright_btn'">
|
||||
{{status == 1 ? '去使用':'已使用'}}
|
||||
:class="fromInfo.status == 0?'containertopboxitemright_four containertopboxitemright_btn':'containertopboxitemright_fours containertopboxitemright_btn'">
|
||||
{{fromInfo.status == 0 ? '去使用':'已使用'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright_there" v-if="item.type == 1 ">
|
||||
|
|
@ -63,333 +62,164 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" v-if="list.length <= 0"
|
||||
mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" iconSize='24' fontSize='24' height='40' />
|
||||
<view v-if="fromInfo.list.length <= 0" style="text-align: center;">
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<up-loadmore :status="form.status" fontSize="14" color="#999" iconSize="14" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox"
|
||||
v-if="type == 'confirm_order_coupon' || type == 'confirm_order_product' || type == 'orderInfo_coupon' || type == 'orderInfo_product'">
|
||||
<view class="btn" @click="cancelCoupon">暂不使用券</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
APIcouponfindByUserId,
|
||||
APIfindCoupon
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
{
|
||||
name: '未使用',
|
||||
type: '1'
|
||||
},
|
||||
{
|
||||
name: '已使用',
|
||||
type: '2'
|
||||
},
|
||||
{
|
||||
name: '已过期',
|
||||
type: '-1'
|
||||
}
|
||||
],
|
||||
tabIndex: 1,
|
||||
list: [],
|
||||
status: 1,
|
||||
type: "",
|
||||
payAmount: 0,
|
||||
shopId: null,
|
||||
orderId: null,
|
||||
couopnInfo: null,
|
||||
shoppingCart: [],
|
||||
productList: [],
|
||||
|
||||
};
|
||||
const tabList = [{
|
||||
name: '未使用',
|
||||
status: '0'
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
if (options.type) {
|
||||
this.type = options.type
|
||||
}
|
||||
if (options.payAmount) {
|
||||
this.payAmount = options.payAmount
|
||||
}
|
||||
if (options.shopId) {
|
||||
this.shopId = options.shopId
|
||||
}
|
||||
if (options.orderId) {
|
||||
this.orderId = options.orderId
|
||||
}
|
||||
if (options.couopnInfo) {
|
||||
this.couopnInfo = JSON.parse(decodeURIComponent(options.couopnInfo))
|
||||
}
|
||||
if (options.shoppingCart) {
|
||||
this.shoppingCart = JSON.parse(decodeURIComponent(options.shoppingCart))
|
||||
}
|
||||
if (options.productList) {
|
||||
this.productList = JSON.parse(decodeURIComponent(options.productList))
|
||||
}
|
||||
{
|
||||
name: '已使用',
|
||||
status: '1'
|
||||
},
|
||||
onShow() {
|
||||
this.list = [];
|
||||
this.getCouponList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 切换类型
|
||||
* @param {Object} item
|
||||
*/
|
||||
towcontentclick(item) {
|
||||
this.tabIndex = item.type;
|
||||
this.status = item.type;
|
||||
this.list = [];
|
||||
this.getCouponList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取优惠券数据
|
||||
*/
|
||||
async getCouponList() {
|
||||
try {
|
||||
let params = {
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
status: this.status
|
||||
}
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'confirm_order_product' || this.type ==
|
||||
'orderInfo_coupon' || this.type == 'orderInfo_product') {
|
||||
params.orderId = -1;
|
||||
}
|
||||
if (this.shopId) {
|
||||
params.shopId = this.shopId;
|
||||
}
|
||||
let res = await this.api.conponList(params)
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
let list = [];
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'orderInfo_coupon') {
|
||||
list = res.data.filter(v => v.type == 1);
|
||||
} else if (this.type == 'confirm_order_product' || this.type == 'orderInfo_product') {
|
||||
list = res.data.filter(v => v.type == 2);
|
||||
} else {
|
||||
list = res.data;
|
||||
}
|
||||
this.list = list;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 去使用优惠券
|
||||
*/
|
||||
navigatorGo(item) {
|
||||
|
||||
uni.cache.set('shopId', item.shopId)
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'confirm_order_product' || this.type ==
|
||||
'orderInfo_coupon' || this.type == 'orderInfo_product') {
|
||||
if (item.type == 1) {
|
||||
if (this.payAmount < item.fullAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足使用金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (this.payAmount < item.discountAmount) {
|
||||
uni.showToast({
|
||||
title: "当前订单金额不足抵扣金额",
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
uni.$emit('couponItem', JSON.stringify(item))
|
||||
let selectCouponData = uni.cache.get('selectCouponData') || [];
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
if (couponList.length > 0) {
|
||||
couponList.map(items => {
|
||||
if (item.type == 1) {
|
||||
for (var v in items) {
|
||||
items[v] = item[v]
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
selectCouponData.push(item)
|
||||
}
|
||||
uni.cache.set('selectCouponData', selectCouponData)
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
let productNum = 0; //商品购物车数量
|
||||
let productTicketNum = 0; //商品券使用数量
|
||||
let product = this.shoppingCart.filter(v => v.productId == item.proId);
|
||||
let productTicket = this.productList.filter(v => v.productId == item.proId);
|
||||
if (product.length <= 0) {
|
||||
uni.showToast({
|
||||
title: "购物车没有" + item.name,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (this.productList.filter(v => v.userCouponId == item.id).length > 0) {
|
||||
uni.showToast({
|
||||
title: `当前优惠券已选择`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
// 计算当前商品购物车数量
|
||||
product.forEach(item => {
|
||||
productNum += item.number;
|
||||
})
|
||||
// 计算当前商品券使用数量
|
||||
productTicket.forEach(item => {
|
||||
productTicketNum += item.num;
|
||||
})
|
||||
if ((productNum - productTicketNum) == 0) {
|
||||
uni.showToast({
|
||||
title: `当前商品已经全部抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
let isNum = 0;
|
||||
let isProductItem;
|
||||
|
||||
// 确认订单
|
||||
if (this.type == 'confirm_order_product') {
|
||||
product.forEach(item => {
|
||||
for (let i = 0; i < item.number; i++) {
|
||||
isNum++
|
||||
if (isNum == productTicketNum + 1) {
|
||||
isProductItem = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.payAmount < (isProductItem.memberPrice > 0 ? isProductItem.memberPrice : isProductItem
|
||||
.salePrice)) {
|
||||
uni.showToast({
|
||||
title: `当前金额不足商品抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
if (this.type == 'orderInfo_product') {
|
||||
product.forEach(item => {
|
||||
for (let i = 0; i < item.num; i++) {
|
||||
isNum++
|
||||
if (isNum == productTicketNum + 1) {
|
||||
isProductItem = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.payAmount < (isProductItem.memberPrice > 0 ? isProductItem.memberPrice : isProductItem
|
||||
.price)) {
|
||||
uni.showToast({
|
||||
title: `当前金额不足商品抵扣`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isProductItem) {
|
||||
uni.showToast({
|
||||
title: `当前订单无可抵扣商品`,
|
||||
icon: "none",
|
||||
})
|
||||
return;
|
||||
}
|
||||
// let productNum = 0;
|
||||
// product.map(item => {
|
||||
// productNum += item.number
|
||||
// })
|
||||
// if ( productNum < item.num) {
|
||||
// uni.showToast({
|
||||
// title: `购物车${item.name}数量不足`,
|
||||
// icon: "none",
|
||||
// })
|
||||
// return;
|
||||
// }
|
||||
// if (product[0].number item.num) {
|
||||
|
||||
// }
|
||||
uni.$emit('couponItem', JSON.stringify(item))
|
||||
let selectCouponData = uni.cache.get('selectCouponData') || [];
|
||||
selectCouponData.push(item)
|
||||
uni.cache.set('selectCouponData', selectCouponData)
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
uni.pro.navigateTo('/pages/order_food/order_food', {
|
||||
shopId: item.shopId
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消使用优惠券/商品券
|
||||
*/
|
||||
async cancelCoupon() {
|
||||
let selectCouponData = uni.cache.get('selectCouponData')
|
||||
if (this.type == 'confirm_order_coupon' || this.type == 'orderInfo_coupon') {
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
let productList = selectCouponData.filter(v => v.type == 2);
|
||||
if (couponList.length > 0) {
|
||||
uni.cache.set('selectCouponData', productList)
|
||||
if (this.couopnInfo && this.orderId) {
|
||||
let params = {
|
||||
shopId: this.shopId,
|
||||
orderId: this.orderId,
|
||||
}
|
||||
if (this.couopnInfo.userCouponInfos.filter(v => v.type == 2).length > 0) {
|
||||
params.userCouponInfos = this.couopnInfo.userCouponInfos.filter(v => v.type == 2)
|
||||
}
|
||||
if (this.couopnInfo.isPointsChecked && this.couopnInfo.calcUsablePointsData.pointsNum &&
|
||||
this.couopnInfo.calcUsablePointsData.pointsNum > 0) {
|
||||
params.pointsNum = this.couopnInfo.calcUsablePointsData.pointsNum;
|
||||
}
|
||||
let res = await this.api.useCoupon(params)
|
||||
}
|
||||
}
|
||||
} else if (this.type == 'confirm_order_product' || this.type == 'orderInfo_product') {
|
||||
let couponList = selectCouponData.filter(v => v.type == 1);
|
||||
let productList = selectCouponData.filter(v => v.type == 2);
|
||||
if (productList.length > 0) {
|
||||
uni.cache.set('selectCouponData', couponList)
|
||||
|
||||
if (this.couopnInfo && this.orderId) {
|
||||
let params = {
|
||||
shopId: this.shopId,
|
||||
orderId: this.orderId,
|
||||
}
|
||||
if (this.couopnInfo.userCouponInfos.filter(v => v.type == 1).length > 0) {
|
||||
params.userCouponInfos = this.couopnInfo.userCouponInfos.filter(v => v.type == 1)
|
||||
}
|
||||
if (this.couopnInfo.isPointsChecked && this.couopnInfo.calcUsablePointsData.pointsNum &&
|
||||
this.couopnInfo.calcUsablePointsData.pointsNum > 0) {
|
||||
params.pointsNum = this.couopnInfo.calcUsablePointsData.pointsNum;
|
||||
}
|
||||
let res = await this.api.useCoupon(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uni.navigateBack();
|
||||
},
|
||||
{
|
||||
name: '已过期',
|
||||
status: '2'
|
||||
}
|
||||
};
|
||||
]
|
||||
const fromInfo = reactive({
|
||||
tabIndex: 0,
|
||||
list: [],
|
||||
status: 0,
|
||||
shopId: null,
|
||||
orderId: null,
|
||||
couopnInfo: null,
|
||||
shoppingCart: [],
|
||||
productList: [],
|
||||
})
|
||||
const form = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
})
|
||||
|
||||
// 判断是选择优惠卷
|
||||
const Orderinfo = reactive({
|
||||
typeOrder: '',
|
||||
shopUserId: "",
|
||||
payAmount: "",
|
||||
shoppingCart: [],
|
||||
show: false
|
||||
})
|
||||
|
||||
// 初始化
|
||||
const init_fn = () => {
|
||||
fromInfo.list = []
|
||||
form.page = 1
|
||||
form.size = 10
|
||||
form.status = 'loadmore'
|
||||
// navtabindex.value == '1' ? getorderList() : userorderList()
|
||||
getCouponList()
|
||||
}
|
||||
|
||||
const towcontentclick = (item) => {
|
||||
fromInfo.tabIndex = item.status;
|
||||
fromInfo.status = item.status;
|
||||
fromInfo.list = [];
|
||||
getCouponList()
|
||||
}
|
||||
|
||||
// 去使用优惠券
|
||||
const navigatorGo = (item) => {
|
||||
uni.pro.switchTab('index/index')
|
||||
}
|
||||
|
||||
const getCouponList = async () => {
|
||||
let res = await APIcouponfindByUserId({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
status: fromInfo.status,
|
||||
shopId: fromInfo.shopId ? fromInfo.shopId : uni.cache.get('shopId'),
|
||||
page: form.page,
|
||||
size: form.size,
|
||||
})
|
||||
if (!res) {
|
||||
form.status = 'nomore'
|
||||
fromInfo.list = []
|
||||
return false
|
||||
}
|
||||
if (res.totalPage == 0 || res.totalPage == 1 && res.totalRow <= 10) {
|
||||
form.status = 'nomore'
|
||||
fromInfo.list = res.records
|
||||
if (form.page == 1 && res.records.length == 0) {
|
||||
fromInfo.list = []
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
if (form.page == 1) {
|
||||
fromInfo.list = res.records
|
||||
} else {
|
||||
fromInfo.list = [...fromInfo.list, ...res.records];
|
||||
}
|
||||
form.page = ++form.page;
|
||||
if (form.page > res.totalPage) {
|
||||
form.status = 'nomore';
|
||||
} else {
|
||||
form.status = 'loading';
|
||||
}
|
||||
}
|
||||
}
|
||||
const cancelCoupon = () => {
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (form.status != 'nomore') {
|
||||
getCouponList()
|
||||
}
|
||||
})
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
|
||||
if (options.shopId) {
|
||||
fromInfo.shopId = options.shopId
|
||||
}
|
||||
// if (options.orderId) {
|
||||
// fromInfo.orderId = options.orderId
|
||||
// }
|
||||
// if (options.couopnInfo) {
|
||||
// this.couopnInfo = JSON.parse(decodeURIComponent(options.couopnInfo))
|
||||
// }
|
||||
// if (options.shoppingCart) {
|
||||
// this.shoppingCart = JSON.parse(decodeURIComponent(options.shoppingCart))
|
||||
// }
|
||||
// if (options.productList) {
|
||||
// this.productList = JSON.parse(decodeURIComponent(options.productList))
|
||||
// }
|
||||
init_fn()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
@ -412,6 +242,8 @@
|
|||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
justify-content: flex-start;
|
||||
height: 50rpx;
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
|
|
@ -428,6 +260,7 @@
|
|||
}
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<view>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/wkthuiyuanbg.png" class="imgstyle" mode=""></image>
|
||||
<button class="btnclass" open-type="getPhoneNumber" @getphonenumber="sumbit">立即开通 </button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopId: "",
|
||||
switchdata: true, // 绑定后
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopId = e.shopId
|
||||
},
|
||||
onUnload() {
|
||||
if (this.switchdata) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sumbit(d) {
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let res = await this.api.userwxlogins({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
shopId: this.shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
let resdata = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
})
|
||||
if (resdata.code == 0) {
|
||||
this.switchdata = false
|
||||
uni.cache.set('userInfo', resdata.data);
|
||||
uni.pro.redirectTo('/pages/member/index', {
|
||||
shopId: this.shopId,
|
||||
type: 'index'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.imgstyle {
|
||||
width: 694rpx;
|
||||
height: 414rpx;
|
||||
margin: 70rpx auto;
|
||||
}
|
||||
|
||||
.btnclass {
|
||||
width: 694rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #6D89A4;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<!-- 账单明细 -->
|
||||
<view style="padding-bottom: 40rpx;">
|
||||
<view class="bild">
|
||||
<view class="bildLeft">
|
||||
<text>我的余额</text>
|
||||
<view>{{formData.info.amount||0}}</view>
|
||||
</view>
|
||||
<view class="bildRight">
|
||||
<text>我的积分</text>
|
||||
<view>{{formData.info.accountPoints||0}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navTop">
|
||||
<view @click="clickEvent(1)" :class="[formData.active==1?'fonts':'']">
|
||||
余额明细
|
||||
<view :class="[formData.active==1?'xian':'']" style="left: 36rpx;"> </view>
|
||||
</view>
|
||||
<view @click="clickEvent(2)" :class="[formData.active==2?'fonts':'']">
|
||||
积分明细
|
||||
<view :class="[formData.active==2?'xian':'']" style="left: 36rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listStyle " v-for="(item,i) in formData.list" :key="i">
|
||||
<!-- <image class="head_img" :src="item.head_img?item.head_img:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'" style="width: 76rpx;height: 76rpx;float: left;" mode=""></image> -->
|
||||
<view class="flex-start">
|
||||
<view class="listStyle_left">
|
||||
<view class="listrigth">
|
||||
<view v-if="formData.active == 1">
|
||||
<text v-if="item.bizCode == 'cashIn'">
|
||||
现金充值
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'wechatIn'">
|
||||
微信小程序充值
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'alipayIn'">
|
||||
支付宝小程序充值
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'awardIn'">
|
||||
充值奖励
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'rechargeRefund'">
|
||||
充值退款
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'orderPay'">
|
||||
订单消费
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'orderRefund'">
|
||||
订单退款
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'adminIn'">
|
||||
管理员充值
|
||||
</text>
|
||||
<text v-if="item.bizCode == 'adminOut'">
|
||||
管理员消费
|
||||
</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
{{item.content}}
|
||||
</view>
|
||||
<!-- <view
|
||||
:class="{colorStyle: (formData.active==1&&item.type == '+') || (formData.active==2&&item.floatType=='add')}">
|
||||
{{ formData.active == 1 ? item.type : (item.floatType == 'add'?'+':'')}}
|
||||
{{formData.active == 1 ? item.amount : item.floatPoints}}
|
||||
</view> -->
|
||||
<view v-if="formData.active == 1" :class="{colorStyle: (item.bizCode == 'cashIn' || item.bizCode == 'wechatIn' ||
|
||||
item.bizCode == 'alipayIn'|| item.bizCode == 'awardIn'|| item.bizCode == 'rechargeRefund')}">
|
||||
{{ item.amount }}
|
||||
</view>
|
||||
<view v-else :class="{colorStyle: (item.floatPoint>0)}">
|
||||
{{item.floatPoints}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" listrigth2">
|
||||
<view>{{item.createTime}}
|
||||
</view>
|
||||
<view v-if="formData.active == 1">余额:{{item.balance}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="formData.list.length <= 0" style="text-align: center;">
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<up-loadmore :status="formData.form.status" fontSize="14" color="#999" iconSize="14" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
|
||||
import {
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
APIshopUsermoneyRecord,
|
||||
APIshopUserpointsRecord
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
const formData = reactive({
|
||||
active: 1,
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
info: {
|
||||
amount: '',
|
||||
accountPoints: ''
|
||||
},
|
||||
shopId: null
|
||||
})
|
||||
|
||||
const getlist = async () => {
|
||||
let res = null
|
||||
if (formData.active == 1) {
|
||||
res = await APIshopUsermoneyRecord({
|
||||
page: formData.form.page,
|
||||
size: formData.form.size,
|
||||
// status: formData.status,
|
||||
shopId: formData.shopId
|
||||
})
|
||||
} else {
|
||||
res = await APIshopUserpointsRecord({
|
||||
page: formData.form.page,
|
||||
size: formData.form.size,
|
||||
// status: formData.form.status,
|
||||
shopId: formData.shopId
|
||||
})
|
||||
}
|
||||
if (res.totalPage == 0 || res.totalPage == 1 && res.totalRow <= 10) {
|
||||
formData.form.status = 'nomore'
|
||||
formData.list = res.records
|
||||
if (formData.form.page == 1 && res.records.length == 0) {
|
||||
formData.records = []
|
||||
formData.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
formData.form.status = 'loading';
|
||||
if (formData.form.page == 1) {
|
||||
formData.list = res.records
|
||||
} else {
|
||||
formData.list = [...formData.list, ...res.records];
|
||||
}
|
||||
formData.form.page = ++formData.form.page;
|
||||
if (formData.form.page > res.totalPage) {
|
||||
formData.form.status = 'nomore';
|
||||
} else {
|
||||
formData.form.status = 'loading';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检测是否包含In
|
||||
const checkIn = (str) => {
|
||||
let reg = RegExp(/In/)
|
||||
return str.match(reg)
|
||||
}
|
||||
|
||||
const clickEvent = (i) => {
|
||||
formData.active = i;
|
||||
formData.form.page = 1;
|
||||
formData.is_end = false
|
||||
formData.form.page = 1
|
||||
formData.form.size = 10
|
||||
formData.form.status = 'loadmore'
|
||||
getlist()
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
getlist()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
formData.info = JSON.parse(decodeURIComponent(options.shopInfo))
|
||||
formData.shopId = options.shopId
|
||||
formData.active = options.type
|
||||
console.log(formData.info)
|
||||
getlist()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bild {
|
||||
height: 320rpx;
|
||||
background-image: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/billingDetails.png');
|
||||
background-size: 750rpx 320rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.bildLeft,
|
||||
.bildRight {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
|
||||
>view,
|
||||
>text {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
>view {
|
||||
margin-top: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navTop {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
margin-top: -60rpx;
|
||||
// padding: 0 120rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.fonts {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
>view {
|
||||
position: relative;
|
||||
|
||||
.xian {
|
||||
width: 58rpx;
|
||||
height: 6rpx;
|
||||
background: #333;
|
||||
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
||||
position: absolute;
|
||||
bottom: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.listStyle {
|
||||
padding: 28rpx;
|
||||
padding-top: 50rpx;
|
||||
width: 100%;
|
||||
|
||||
.listrigth,
|
||||
.listrigth2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// padding-left: 32rpx;
|
||||
}
|
||||
|
||||
.listrigth {
|
||||
.colorStyle {
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
>view {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.listStyle_left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.head_img {
|
||||
border-radius: 50%;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.listrigth2 {
|
||||
margin-top: 16rpx;
|
||||
|
||||
>view {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,489 @@
|
|||
<template>
|
||||
<!-- 店铺详情 -->
|
||||
<u-popup :show="memberOpen" :round="20" overlayOpacity="0.8" mode="bottom" @close="showClose" height="500">
|
||||
<view class="register-member-wrap">
|
||||
<view class="register-title">欢迎加入{{shopUserInfo.shopName?shopUserInfo.shopName:'本店'}}</view>
|
||||
<view class="register-tip">请完善个人信息完成会员注册</view>
|
||||
<view class="register-content">
|
||||
<view class="reg-head">
|
||||
<view class="reg-head-img">
|
||||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||||
<button class="reg-head-img" type="default" open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar">
|
||||
<image class="reg-head-img"
|
||||
:src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'"
|
||||
mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="reg-head-img" @click="onChooseAvatar">
|
||||
<image class="reg-head-img"
|
||||
:src="userHeadImg || 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/head_default.png'"
|
||||
mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="reg-cell">
|
||||
<view class="lable">昵称<text style="color: #CD1A1A;">*</text></view>
|
||||
<u-input class="value" v-model="formInfo.nickName" fontSize="14px" type="text" input-align="left"
|
||||
placeholder="请输入昵称" :custom-style="{border:'none'}"
|
||||
placeholderStyle="color:#999;font-size: 28rpx" />
|
||||
</view>
|
||||
<view class="reg-cell" @click="calendarShow = true">
|
||||
<view class="lable">生日</view>
|
||||
<view class="value" :style="{color: formInfo.birthDay ? '#333' : '#999'}">
|
||||
{{ formInfo.birthDay || '请选择日期'}}
|
||||
</view>
|
||||
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
||||
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
||||
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
||||
<up-datetime-picker mode="date" @cancel="calendarShow = false" :show="calendarShow"
|
||||
:minDate="-2208988800000" v-model="value1" itemHeight="66" visibleItemCount="5"
|
||||
@confirm="confirmTime"></up-datetime-picker>
|
||||
<up-icon name="arrow-down-fill" color="#000" size="10"></up-icon>
|
||||
</view>
|
||||
<view class="reg-cell">
|
||||
<view class="lable">手机号</view>
|
||||
<up-input class="value" v-model="formInfo.telephone" fontSize="14px" type="text" input-align="left"
|
||||
readonly placeholder="获取手机号" :custom-style="{border:'none'}"
|
||||
placeholder-style="color:#999;font-size: 28rpx" />
|
||||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||||
<button class="getPhone" size="10" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="getPhone" size="10" open-type="getAuthorize" scope='phoneNumber'
|
||||
@getAuthorize="getPhone">
|
||||
<!-- #endif -->
|
||||
<view class="text">{{'获取手机号'}}</view>
|
||||
</button>
|
||||
</view>
|
||||
<view class="agreement">
|
||||
<view class="agreement_tip">我已阅读并同意以下内容</view>
|
||||
<view class="agreement_item" @click="isProtocol = !isProtocol">
|
||||
<up-checkbox-group>
|
||||
<up-checkbox :checked="isProtocol" shape="circle" activeColor="#E3AD7F"
|
||||
@change="radioChange" size="15" iconSize="10"></up-checkbox>
|
||||
</up-checkbox-group>
|
||||
<text @click.stop="viewProtocol(1)" class="agreement_item_text">用户协议/隐私条款</text>
|
||||
</view>
|
||||
<!-- <view class="agreement_item">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox shape="circle" activeColor="#E3AD7F" @change="radioChange" size="30"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<text class="agreement_item_text">隐私条款</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="register_btn" @tap="$u.debounce(registerMember, 500)">快速注册</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
defineProps,
|
||||
reactive,
|
||||
ref,
|
||||
defineEmits
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
APIshopUser,
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
import {
|
||||
APIuserphone
|
||||
} from '@/common/api/api.js'
|
||||
|
||||
const props = defineProps({
|
||||
shopUserInfo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
detailtype: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
memberOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
});
|
||||
|
||||
// 定义事件发射器
|
||||
const emits = defineEmits(['emitsmemberOpen']);
|
||||
|
||||
// 定义要触发的事件
|
||||
|
||||
const formInfo = reactive({
|
||||
nickName: "",
|
||||
telephone: "",
|
||||
birthDay: "",
|
||||
})
|
||||
|
||||
const value1 = Number(new Date())
|
||||
|
||||
const calendarShow = ref(false)
|
||||
|
||||
// 用户图片
|
||||
const userHeadImg = ref('')
|
||||
|
||||
|
||||
//显示隐藏
|
||||
const isProtocol = ref(false)
|
||||
|
||||
const init = async () => {
|
||||
|
||||
// if (uni.cache.get('shopUserInfo') && uni.cache.get('shopId') == uni.cache.get('shopUserInfo').id) {
|
||||
// shopUserInfo = uni.cache.get('shopUserInfo');
|
||||
// } else {
|
||||
// let res = await this.api.shopUserInfo({
|
||||
// "shopId": uni.cache.get('shopId'),
|
||||
// "userId": uni.cache.get('userInfo').id,
|
||||
// })
|
||||
// if (res.code == 0) {
|
||||
// shopUserInfo = res.data;
|
||||
// }
|
||||
// }
|
||||
// memberOpen.value = shopUserInfo.isVip == 0 ? true : false;
|
||||
// userHeadImg.value = shopUserInfo.headImg;
|
||||
// formInfo.nickName = shopUserInfo.nickName && shopUserInfo.nickName != '微信用户' ? shopUserInfo
|
||||
// .nickName : '';
|
||||
// formInfo.telephone = shopUserInfo.telephone;
|
||||
// formInfo.birthDay = shopUserInfo.birthDay
|
||||
|
||||
}
|
||||
|
||||
// 返回
|
||||
const showClose = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
//
|
||||
const radioChange = (n) => {
|
||||
isProtocol.value = n;
|
||||
}
|
||||
|
||||
// 查看协议
|
||||
const viewProtocol = () => {
|
||||
wx.openPrivacyContract({
|
||||
success: () => {}, // 打开成功
|
||||
fail: () => {}, // 打开失败
|
||||
complete: () => {}
|
||||
})
|
||||
}
|
||||
|
||||
//上传头像
|
||||
const onChooseAvatar = (e) => {
|
||||
//#ifdef MP-WEIXIN
|
||||
let avatarUrl = e.detail.avatarUrl
|
||||
uni.uploadFile({
|
||||
url: uni.conf.baseUrl + '/account/user/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
token: uni.cache.get('token') || '',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType: 'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
userHeadImg.value = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
//#ifdef MP-ALIPAY
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9,设置图片的数量
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
|
||||
success: function(res) {
|
||||
// 成功选择图片后
|
||||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||||
|
||||
my.uploadFile({
|
||||
url: uni.conf.baseUrl + '/account/user/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType: 'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
userHeadImg.value = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
|
||||
// 确定生日
|
||||
const confirmTime = (e) => {
|
||||
calendarShow.value = false;
|
||||
formInfo.birthDay = getDate(e.value);
|
||||
}
|
||||
|
||||
// 获取手机号
|
||||
const getPhone = (d) => {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let res = await APIuserphone({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
source: "wechar"
|
||||
})
|
||||
formInfo.telephone = res
|
||||
}
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序环境
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_user',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
my.getPhoneNumber({
|
||||
success: async (data) => {
|
||||
let res = await APIuserphone({
|
||||
encryptedData: JSON.parse(data.response).response,
|
||||
source: "alipay"
|
||||
})
|
||||
formInfo.telephone = res
|
||||
// console.log(this.phonetitle)
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
// 格式化时间戳
|
||||
const getDate = (time) => {
|
||||
const date = new Date(time);
|
||||
// const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
|
||||
const registerMember = async () => {
|
||||
if (formInfo.nickName == "" || formInfo.nickName == null) {
|
||||
uni.showToast({
|
||||
title: '请输入会员昵称',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (formInfo.telephone == "" || formInfo.telephone == null) {
|
||||
uni.showToast({
|
||||
title: '请获取手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!isProtocol.value) {
|
||||
uni.showToast({
|
||||
title: '请勾选协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
await APIshopUser({
|
||||
// id: uni.cache.get('userInfo').id,
|
||||
// shopId: uni.cache.get('shopId'),
|
||||
nickName: formInfo.nickName,
|
||||
headImg: userHeadImg.value,
|
||||
phone: formInfo.telephone,
|
||||
birthDay: formInfo.birthDay
|
||||
})
|
||||
let APIshopUserInfores = await APIshopUserInfo({
|
||||
shopId: uni.cache.get('shopId')
|
||||
})
|
||||
uni.cache.set('orderVIP', APIshopUserInfores)
|
||||
uni.cache.set('ordershopUserInfo', APIshopUserInfores.shopInfo)
|
||||
uni.showToast({
|
||||
title: '会员加入成功',
|
||||
icon: 'none'
|
||||
})
|
||||
// 定义自定义事件
|
||||
// setTimeout(() => {
|
||||
// uni.navigateBack()
|
||||
// }, 1500)
|
||||
emits('emitsmemberOpen');
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-datetime-picker {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.register-member-wrap {
|
||||
padding: 64rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.register-title {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.register-tip {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.register-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.reg-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 64rpx;
|
||||
|
||||
.reg-head-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.reg-head-edit {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reg-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
|
||||
.lable {
|
||||
width: 120rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 12rpx 0 12rpx 18rpx;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
input {
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.getPhone {
|
||||
background-color: none;
|
||||
border: 2rpx solid #E3AD7F;
|
||||
color: #E3AD7F;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 30rpx;
|
||||
// #ifdef MP-ALIPAY
|
||||
padding-top: 0;
|
||||
display: initial;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5rpx;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 48rpx;
|
||||
|
||||
.agreement_tip {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.agreement_item {
|
||||
display: flex;
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: 16rpx;
|
||||
|
||||
.agreement_item_text {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #E3AD7F;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register_btn {
|
||||
width: 572rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
background: #E3AD7F;
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
margin: 30rpx auto 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,708 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="location" @click="openLocation">
|
||||
<image class="location_icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/location.png"
|
||||
mode="aspectFill"></image>
|
||||
<view>{{ infoForn.shopUserInfo.shopName }}</view>
|
||||
<up-icon name="arrow-right" color="#575B66" size="16"></up-icon>
|
||||
</view>
|
||||
|
||||
<view class="card_info flex-colum">
|
||||
<view class="title">账户余额(元)</view>
|
||||
<view class="card_info_con flex-between">
|
||||
<view class="balance">{{infoForn.userInfo.amount || '0.00'}}</view>
|
||||
<view class="card_info_con_right flex-end">
|
||||
<view class="card_info_con_right_item flex-colum" @click="handleClick(item)"
|
||||
v-for="(item,index) in cardManageList" :key="index">
|
||||
<image class="card_info_con_right_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="card_info_con_right_item_text">{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="customAmount" v-if="infoForn.shopUserInfo.isCustomAmount == 1">
|
||||
<view class="customAmount_left">
|
||||
<text class="customAmount_left_tip">¥</text>
|
||||
<input type="number" v-model="infoForn.amount" inputAlign="left"
|
||||
:placeholder="`充${infoForn.amount}送${infoForn.giftAmount}`" :customStyle="{border: '0'}"
|
||||
controlled="true" @input="amountChange"></input>
|
||||
</view>
|
||||
<text class="customAmount_right">自定义金额</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="rechargeList">
|
||||
<view class="rechargeList_f" @click="clickinput(item,index)" v-for="(item,index) in infoForn.listdata"
|
||||
:key="index">
|
||||
<view class="rechargeList_item flex-colum " :class="index === infoForn.inputshow?'active':''">
|
||||
<view class="rechargeList_item_title">充值</view>
|
||||
<view class="flex-colum-start">
|
||||
<view class="rechargeList_item_amount">¥<text>{{item.amount}}</text></view>
|
||||
<view class="rechargeList_item_gift" v-show="index === infoForn.inputshow">
|
||||
<image class="rechargeList_item_gift_bg"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/gift_icon.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="rechargeList_item_gift_text">
|
||||
<text>赠</text>
|
||||
<text>¥{{ item.giftAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rechargeList_item_handsel" v-show="index !== infoForn.inputshow">
|
||||
赠送{{item.giftAmount}}元
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="gift" v-if="infoForn.couponList && infoForn.couponList.length > 0">
|
||||
<view class="gift_title">您将获得:</view>
|
||||
<view class="gift_list">
|
||||
<view class="gift_list_item" v-for="(item,index) in infoForn.couponList" :key="index">
|
||||
<text class="icon"></text>
|
||||
<text class="text"> {{ item.title }} * {{ item.number}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="explain">
|
||||
<view class="explain-top flex-between">
|
||||
<text class="explain-top_title">适用门店</text>
|
||||
<text class="shopName">{{ infoForn.shopUserInfo.shopName }}</text>
|
||||
</view>
|
||||
<view class="explain_content">
|
||||
<text class="explain_content_title">充值说明</text>
|
||||
<text class="explain_content_text">1.充值金额1家门店可用</text>
|
||||
<text class="explain_content_text">2.储值完成后不支持自助退款,可联系商家处理</text>
|
||||
<text class="explain_content_text">3.钱包余额不支持转赠,不可提现,长期有效</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="rechargeBox">
|
||||
<view class="agreement" @click="infoForn.isProtocol = !infoForn.isProtocol">
|
||||
<up-checkbox-group>
|
||||
<up-checkbox :checked="infoForn.isProtocol" shape="circle" activeColor="#E3AD7F"
|
||||
@change="radioChange" size="18" iconSize="10">
|
||||
</up-checkbox>
|
||||
</up-checkbox-group>
|
||||
<text>已同意</text>
|
||||
<text class="agreement_text" @click.stop="viewProtocol">《用户隐私协议》</text>
|
||||
</view>
|
||||
<view class="recharge" @tap="$u.debounce(userbalancerechangesub, 500)">立即充值</view>
|
||||
</view>
|
||||
<registermember :memberOpen="infoForn.show" :shopUserInfo="infoForn.shopUserInfo" :detailtype='detailtype'
|
||||
@emitsmemberOpen="emitsmemberOpen">
|
||||
</registermember>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
import registermember from './components/registermember.vue'
|
||||
|
||||
import {
|
||||
APIuseractivate,
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
// 获取全局属性
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
|
||||
// 状态管理
|
||||
import {
|
||||
Memberpay
|
||||
} from '@/stores/pay.js';
|
||||
const store = Memberpay();
|
||||
|
||||
const cardManageList = [{
|
||||
name: "明细",
|
||||
url: "user/member/billDetails",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/detail.png"
|
||||
},
|
||||
{
|
||||
name: "管理",
|
||||
url: "user/member/storedManage",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/manage.png"
|
||||
}
|
||||
]
|
||||
|
||||
const infoForn = reactive({
|
||||
inputshow: 0,
|
||||
memberOpen: false,
|
||||
isProtocol: false,
|
||||
listdata: [],
|
||||
amount: 0,
|
||||
giftAmount: 0,
|
||||
shopUserInfo: {},
|
||||
shopId: '',
|
||||
couponList: [],
|
||||
type: "",
|
||||
userInfo: '',
|
||||
show: false
|
||||
})
|
||||
|
||||
|
||||
// * 获取充值金额列表
|
||||
const paygetActive = async () => {
|
||||
let res = await APIuseractivate({
|
||||
shopId: infoForn.shopId,
|
||||
page: 1,
|
||||
pageSize: 99
|
||||
})
|
||||
try {
|
||||
infoForn.listdata = res;
|
||||
infoForn.couponList = infoForn.listdata[0].couponList;
|
||||
infoForn.giftAmount = infoForn.listdata[0].giftAmount
|
||||
infoForn.id = infoForn.listdata[0].id
|
||||
if (infoForn.type == 'topUpActivity') {
|
||||
infoForn.amountChange()
|
||||
} else {
|
||||
infoForn.amount = infoForn.listdata[0].amount;
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
|
||||
// * 拉起地图
|
||||
const openLocation = () => {
|
||||
uni.openLocation({
|
||||
latitude: Number(infoForn.shopUserInfo.lat), // 目的地的纬度,浮点数,范围为-90~90
|
||||
longitude: Number(infoForn.shopUserInfo.lng), // 目的地的经度,浮点数,范围为-180~180
|
||||
scale: 18, // 缩放比例,范围5~18
|
||||
name: infoForn.shopUserInfo.shopName, // 位置名
|
||||
address: infoForn.shopUserInfo.address, // 地址的详细说明
|
||||
success() {
|
||||
console.log('导航启动成功');
|
||||
|
||||
},
|
||||
fail(error) {
|
||||
console.log('导航启动失败', error);
|
||||
if (error.errMsg == "openLocation:fail invalid_coordinate") {
|
||||
uni.showToast({
|
||||
title: "门店经纬度无效",
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const emitsmemberOpen = async () => {
|
||||
asyncshopUserInfo()
|
||||
await paygetActive()
|
||||
// infoForn.show = false
|
||||
}
|
||||
|
||||
// 监听金额修改
|
||||
const amountChange = () => {
|
||||
let item = infoForn.listdata.filter(item => infoForn.amount == item.amount)
|
||||
if (item.length > 0) {
|
||||
infoForn.listdata.forEach((v, e) => {
|
||||
if (infoForn.amount == v.amount) {
|
||||
infoForn.inputshow = e;
|
||||
infoForn.clickinput(v, e)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
infoForn.inputshow = '';
|
||||
infoForn.couponList = [];
|
||||
infoForn.giftAmount = '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// * 进入明细\管理
|
||||
const handleClick = (item) => {
|
||||
console.log(item)
|
||||
uni.pro.navigateTo(item.url, {
|
||||
shopId: infoForn.shopId,
|
||||
type: item.name == '明细' ? 1 : 2,
|
||||
shopInfo: JSON.stringify(infoForn.userInfo)
|
||||
})
|
||||
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/${item.url}?shopUserInfo=${JSON.stringify(infoForn.shopUserInfo)}`
|
||||
// })
|
||||
}
|
||||
// * 是否同意协议
|
||||
const radioChange = (n) => {
|
||||
infoForn.isProtocol = n;
|
||||
}
|
||||
//查看协议
|
||||
const viewProtocol = () => {
|
||||
wx.openPrivacyContract({
|
||||
success: () => {}, // 打开成功
|
||||
fail: () => {}, // 打开失败
|
||||
complete: () => {}
|
||||
})
|
||||
}
|
||||
|
||||
// 解码
|
||||
const getQueryString = (url, name) => {
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// 充值金额切换
|
||||
const clickinput = (a, b) => {
|
||||
infoForn.inputshow = b;
|
||||
infoForn.couponList = a.couponList;
|
||||
infoForn.amount = a.amount;
|
||||
infoForn.giftAmount = a.giftAmount;
|
||||
infoForn.id = a.id;
|
||||
}
|
||||
|
||||
// 充值
|
||||
const userbalancerechangesub = async () => {
|
||||
if (!infoForn.isProtocol) {
|
||||
uni.showToast({
|
||||
title: '请勾选协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
console.log(infoForn.amount)
|
||||
if (infoForn.amount == null || infoForn.amount == '') {
|
||||
uni.showToast({
|
||||
title: '金额不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (infoForn.amount <= 0) {
|
||||
uni.showToast({
|
||||
title: '金额必须大于0',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
await store.actionspayltPayVip({
|
||||
shopId: infoForn.shopId,
|
||||
activateId: infoForn.id,
|
||||
shopUserId: infoForn.userInfo.id,
|
||||
amount: infoForn.amount, //金额
|
||||
returnUrl: '', //跳转地址
|
||||
buyerRemark: ''
|
||||
})
|
||||
asyncshopUserInfo()
|
||||
}
|
||||
|
||||
|
||||
// 会员总信息
|
||||
const asyncshopUserInfo = async () => {
|
||||
let res = await APIshopUserInfo({
|
||||
shopId: uni.cache.get('shopId')
|
||||
})
|
||||
uni.cache.set('orderVIP', res)
|
||||
uni.cache.set('ordershopUserInfo', res.shopInfo)
|
||||
infoForn.show = res.isVip == 1 ? false : true
|
||||
infoForn.userInfo = res
|
||||
infoForn.shopUserInfo = res.shopInfo
|
||||
}
|
||||
|
||||
const detailtype = ref('')
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await proxy.$onLaunched;
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
// #ifdef MP-WEIXIN
|
||||
if (options.q) {
|
||||
infoForn.shopId = await getQueryString(decodeURIComponent(options.q), 'shopId')
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (getApp().globalData.shopId) {
|
||||
infoForn.shopId = getApp().globalData.shopId
|
||||
}
|
||||
// #endif
|
||||
|
||||
if (options.shopId) {
|
||||
uni.cache.set('shopId', options.shopId, 30)
|
||||
infoForn.shopId = options.shopId ? options.shopId : uni.cache.get('shopId')
|
||||
}
|
||||
asyncshopUserInfo()
|
||||
if (options.type == 'detail') {
|
||||
detailtype.value = 'detail'
|
||||
}
|
||||
if (options.type) {
|
||||
infoForn.type = options.type
|
||||
}
|
||||
if (options.amount) {
|
||||
infoForn.amount = options.amount;
|
||||
}
|
||||
paygetActive()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16rpx 20rpx 245rpx 20rpx;
|
||||
|
||||
.location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 16rpx 28rpx 18rpx 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
.location_icon {
|
||||
width: 20rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card_info {
|
||||
width: 100%;
|
||||
height: 182rpx;
|
||||
background: linear-gradient(132deg, #D6B68D 0%, #E6D6BC 100%);
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
align-items: initial;
|
||||
margin-bottom: 26rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card_info_con {
|
||||
align-items: flex-end;
|
||||
|
||||
.balance {
|
||||
font-weight: 400;
|
||||
font-size: 48rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card_info_con_right {
|
||||
.card_info_con_right_item {
|
||||
margin-left: 64rpx;
|
||||
|
||||
.card_info_con_right_item_icon {
|
||||
width: 40rpx;
|
||||
height: 36rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.card_info_con_right_item_text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customAmount {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
padding: 22rpx 16rpx 22rpx 32rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.customAmount_left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.customAmount_left_tip {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.customAmount_right {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rechargeList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.rechargeList_f {
|
||||
width: 33.333%;
|
||||
margin-bottom: 30rpx;
|
||||
padding-right: 20rpx;
|
||||
padding-left: 0;
|
||||
|
||||
.rechargeList_item {
|
||||
border-radius: 0rpx 48rpx 0rpx 0rpx;
|
||||
border: 4rpx solid #E5E5E5;
|
||||
align-items: initial;
|
||||
padding: 26rpx 22rpx;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.rechargeList_item_title {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.rechargeList_item_title,
|
||||
.rechargeList_item_handsel {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.rechargeList_item_amount {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
|
||||
text {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.rechargeList_item_handsel {}
|
||||
|
||||
.rechargeList_item_gift {
|
||||
width: 92.52rpx;
|
||||
height: 88.74rpx;
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
|
||||
.rechargeList_item_gift_bg {
|
||||
width: 92.52rpx;
|
||||
height: 88.74rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rechargeList_item_gift_text {
|
||||
width: 92.52rpx;
|
||||
height: 88.74rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-weight: bold;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rechargeList_item.active {
|
||||
border: 4rpx solid #DCC19E;
|
||||
background: linear-gradient(133deg, #F9F6ED 0%, #FFFFFF 100%);
|
||||
|
||||
.rechargeList_item_title {
|
||||
color: #F7664E;
|
||||
margin-bottom: 47rpx;
|
||||
}
|
||||
|
||||
.rechargeList_item_amount {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FB604A;
|
||||
|
||||
text {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #FB604A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rechargeList_f:nth-child(3n-1) {
|
||||
padding-right: 10rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.rechargeList_f:nth-child(3n) {
|
||||
padding-right: 0;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.gift {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 22rpx;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
.gift_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.gift_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.gift_list_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #F7853D;
|
||||
margin-right: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explain {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 22rpx 24rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.explain-top {
|
||||
// align-items: center;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.explain-top_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shopName {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.explain_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.explain_content_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.explain_content_text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rechargeBox {
|
||||
width: 100%;
|
||||
padding: 0 28rpx 84rpx 28rpx;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 16rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.agreement_text {
|
||||
color: #E3AD7F;
|
||||
}
|
||||
}
|
||||
|
||||
.recharge {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
background: #E3AD7F;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="list_item" @click="handleClick(item)" v-for="(item,index) in list" :key="index">
|
||||
<view class="list_item_title">{{ item.title }}</view>
|
||||
<view class="list-cell">
|
||||
<view class="list-cell-item" v-for="(item1,index1) in item.list" :key="index1">
|
||||
<view class="list-cell-item-title"> {{ item1.title }}</view>
|
||||
<view class="list-cell-item-content">
|
||||
<view class="list-cell-item-content-text" v-for="(item2,index2) in item1.list"
|
||||
:key="index2">{{item2}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
const list = [{
|
||||
title: "充值规则",
|
||||
list: [{
|
||||
title: "满赠规则",
|
||||
list: [
|
||||
"充300元送15元+0积分+0元券",
|
||||
"充500元送40元+0积分+0元券",
|
||||
"充1000元送100元+0积分+0元券",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "适用门店",
|
||||
list: [
|
||||
"适用于1家门店",
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "使用规则",
|
||||
list: [{
|
||||
title: "使用须知",
|
||||
list: [
|
||||
"按比例",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "免密支付",
|
||||
list: [
|
||||
"免密支付已开通",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "适用商品",
|
||||
list: [
|
||||
"全部商品可用",
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const userInfo = ref()
|
||||
|
||||
const handleClick = (item) => {
|
||||
// uni.pro.navigateTo(item.url, userInfo.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 48rpx 20rpx;
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.list_item_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.list-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-cell-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
padding-bottom: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.list-cell-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.list-cell-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list-cell-item-content-text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_item:last-child .list-cell-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="onecontentone">
|
||||
我的会员卡<text v-if="orderForm.list.length!=0">({{orderForm.list.length}})</text>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="towcontentitem" v-if="orderForm.list.length>0" v-for="(item,index) in orderForm.list"
|
||||
:key="index" @click="eeInfo(item)">
|
||||
<image class="towcontentitemimage"
|
||||
src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/my/recharge.png" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="item.logo" mode="aspectFill"></image>
|
||||
<text class="towcontentitemonetext" style="color: #333333;">{{item.chainName}}</text>
|
||||
<!-- 余额:<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text> -->
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color:#333333;">余额:{{item.amount}}</text>
|
||||
<text>{{item.shopName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderForm.list.length <= 0 && orderForm.is_end" class="flex-colum">
|
||||
<image style="width: 402rpx;height: 442rpx;margin:240rpx auto 32rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<up-loadmore :status="orderForm.form.status" iconSize='12' fontSize='12' height='20' />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
APIusershopUservipCard
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
const orderForm = reactive({
|
||||
type: '', //类型
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const paygetShopByMember = async () => {
|
||||
let res = await APIusershopUservipCard({
|
||||
page: orderForm.form.page,
|
||||
pageSize: orderForm.form.size,
|
||||
})
|
||||
|
||||
if (res.totalPage == 1 && res.totalRow <= 10) {
|
||||
orderForm.form.status = 'nomore'
|
||||
orderForm.list = res.records
|
||||
if (orderForm.form.page == 1 && res.records.length == 0) {
|
||||
orderForm.records = []
|
||||
orderForm.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
orderForm.form.status = 'loading';
|
||||
orderForm.list = [...orderForm.list, ...res.records];
|
||||
orderForm.form.page = ++orderForm.form.page;
|
||||
if (orderForm.form.page > res.totalPage) {
|
||||
orderForm.form.status = 'nomore';
|
||||
} else {
|
||||
orderForm.form.status = 'loading';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const eeInfo = async (item) => {
|
||||
// if (res.code == 0) {
|
||||
// uni.cache.set('shopUserInfo', res)
|
||||
// uni.cache.set('shopId', item.shopId)
|
||||
if (orderForm.type && orderForm.type == 'user_payCode') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(item)
|
||||
})
|
||||
} else if (orderForm.type && orderForm.type == 'user_recharge') {
|
||||
uni.pro.navigateTo('member/index', {
|
||||
shopId: item.shopId,
|
||||
type: 'index',
|
||||
})
|
||||
} else if (orderForm.type && orderForm.type == 'user_points') {
|
||||
uni.pro.navigateTo('/pagesPoints/index/index', {
|
||||
shopId: item.shopId,
|
||||
type: 'member_list',
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('user/member/memberdetails', {
|
||||
shopId: item.shopId
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
onReachBottom(() => {
|
||||
paygetShopByMember()
|
||||
})
|
||||
onMounted((e) => {
|
||||
paygetShopByMember()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-top: 16rpx solid #f7f7f7;
|
||||
padding: 28rpx;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.flex-colum_image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentone {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.flex-colum {
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 96%;
|
||||
position: relative;
|
||||
height: 224rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
width: 60%;
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 18rpx;
|
||||
padding: 0 32rpx;
|
||||
// margin-top: 52rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,651 @@
|
|||
<template>
|
||||
<!-- 会员详情 -->
|
||||
<view class="content">
|
||||
<view class="card_info">
|
||||
<image class="card_info_bg"
|
||||
:src="shopUserInfo.shopExtend?shopUserInfo.shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_bg.png'"
|
||||
mode="aspectFill"></image>
|
||||
<view class="card_info_bg_box"></view>
|
||||
<view class="card_content">
|
||||
<view class="card_head">
|
||||
<view class="card_head_left">
|
||||
<image class="card_head_left_head"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_head.png"
|
||||
mode="aspectFill"></image>
|
||||
<text class="card_head_left_name">{{shopUserInfo.shopInfo.shopName||''}}会员卡</text>
|
||||
<view class="card_head_left_icon_box" v-if="shopUserInfo.shopInfo.isVip != 0">
|
||||
<image class="card_head_left_icon1"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon1.png"
|
||||
mode="aspectFill"></image>
|
||||
<text class="card_head_left_iconText">VL1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_head_right" @click="clickEvent" v-if="shopUserInfo.shopInfo.isVip != 0">
|
||||
<image class="card_head_left_qrCode"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_qrCode.png"
|
||||
mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_cen">
|
||||
<view class="card_cen_left">{{ shopUserInfo.shopInfo.isVip == 0 ? '尚未开通会员暂无法享受会员权益' : '欢迎加入本店会员~'}}
|
||||
</view>
|
||||
<!-- <view class="card_cen_right" v-if="shopUserInfo.shopInfo.isVip != 0">查看特权</view> -->
|
||||
</view>
|
||||
<view class="card_bom" v-if="shopUserInfo.shopInfo.isVip != 0">
|
||||
<view class="card_bom_item" @click="itemClick(1)">
|
||||
<text>{{shopUserInfo.amount || '0.00'}}</text><text>储值</text>
|
||||
</view>
|
||||
<view class="card_bom_item" @click="itemClick(2)">
|
||||
<text>{{shopUserInfo.accountPoints || '0'}}</text><text>积分</text>
|
||||
</view>
|
||||
<view class="card_bom_item" @click="itemClick(3)">
|
||||
<text>{{shopUserInfo.couponNum || '0'}}</text><text>优惠券</text>
|
||||
</view>
|
||||
<view class="card_bom_item">
|
||||
<text>0</text><text>权益卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="card_bottom" :class="shopUserInfo.shopInfo.isVip == 0 ? 'n' : ''">
|
||||
<view class="card_bottom_Box" v-if="shopUserInfo.shopInfo.isVip != 0">
|
||||
<view class="card_bottom_left flex-start">
|
||||
<image class="card_bottom_head"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_head2.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="">
|
||||
<view class="card_bottom_title">感谢你 2 天陪伴</view>
|
||||
<view class="flex-start">
|
||||
<view class="card_bottom_text">您今天的幸运词:<text class="luckyWord">林波微步</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="card_bottom_right_img"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_img3.png" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="card_bottom_Box" v-else>
|
||||
<view class="card_bottom_equity">
|
||||
<view class="card_bottom_equity_title">专享2项权益</view>
|
||||
<view class="card_bottom_equity_list">
|
||||
<view class="card_bottom_equity_list_item">
|
||||
<image class="list_item_icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon01.png"
|
||||
mode="aspectFill"></image>
|
||||
<text class="list_item_text">会员专属活动</text>
|
||||
</view>
|
||||
<view class="card_bottom_equity_list_item">
|
||||
<image class="list_item_icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/member_icon02.png"
|
||||
mode="aspectFill"></image>
|
||||
<text class="list_item_text">福利商品</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<registermember :memberOpen="form.memberOpen" :shopUserInfo="shopUserInfo.shopInfo">
|
||||
</registermember>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import {
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
import registermember from './components/registermember.vue'
|
||||
|
||||
|
||||
const shopUserInfo = reactive({
|
||||
shopInfo: {},
|
||||
shopExtend: {},
|
||||
shopId: ""
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
memberOpen: true,
|
||||
shopName: "",
|
||||
amount: '',
|
||||
lucky: {
|
||||
list: ['鸿运当头', "财运亨通", "时来运转", "否极泰来", "花逢时发"],
|
||||
index: 0,
|
||||
text: ""
|
||||
},
|
||||
})
|
||||
|
||||
const itemClick = (type) => {
|
||||
if (type == 1) {
|
||||
uni.pro.navigateTo('user/member/index', {
|
||||
shopId: shopUserInfo.shopId,
|
||||
type: type
|
||||
})
|
||||
} else if (type == 2) {
|
||||
uni.pro.navigateTo('user/member/billDetails', {
|
||||
shopId: shopUserInfo.shopId,
|
||||
type: type,
|
||||
shopInfo: JSON.stringify(shopUserInfo)
|
||||
})
|
||||
} else if (type == 3) {
|
||||
uni.pro.navigateTo('user/coupon', {
|
||||
shopId: shopUserInfo.shopId,
|
||||
shopInfo: shopUserInfo.shopInfo
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// * 注册会员卡
|
||||
const clickEvent = () => {
|
||||
uni.pro.navigateTo('user/member/paycode', {
|
||||
shopId: shopUserInfo.shopId,
|
||||
shopInfo: JSON.stringify(shopUserInfo.shopInfo)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 会员总信息
|
||||
const asyncshopUserInfo = async () => {
|
||||
let res = await APIshopUserInfo({
|
||||
shopId: shopUserInfo.shopId
|
||||
})
|
||||
Object.assign(shopUserInfo, res);
|
||||
uni.cache.set('orderVIP', res)
|
||||
uni.cache.set('ordershopUserInfo', res.shopInfo)
|
||||
form.memberOpen = res.isVip == 1 ? false : true
|
||||
shopUserInfo.shopExtend = res.shopExtendList[2]
|
||||
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 检查页面栈是否为空
|
||||
if (pages.length === 0) {
|
||||
console.error('未获取到页面栈');
|
||||
return;
|
||||
}
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const pageParams = currentPage.options;
|
||||
if (pageParams.shopId) {
|
||||
shopUserInfo.shopId = pageParams.shopId
|
||||
uni.cache.set('shopId', pageParams.shopId, 30)
|
||||
asyncshopUserInfo()
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
font-size: 12rpx;
|
||||
|
||||
.card_info {
|
||||
width: 630rpx;
|
||||
height: 304rpx;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.card_info_bg {
|
||||
width: 630rpx;
|
||||
height: 304rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card_info_bg_box {
|
||||
width: 630rpx;
|
||||
height: 304rpx;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
border-radius: 24rpx;
|
||||
background-color: rgba(51, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
.card_content {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
padding: 30rpx;
|
||||
|
||||
.card_head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.card_head_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card_head_left_head {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.card_head_left_name {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.card_head_left_icon_box {
|
||||
width: 64.23rpx;
|
||||
height: 26.56rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.card_head_left_icon1 {
|
||||
width: 64.23rpx;
|
||||
height: 26.56rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.card_head_left_iconText {
|
||||
font-weight: bold;
|
||||
font-size: 18rpx;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card_head_right {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: #000000;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card_head_left_qrCode {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_cen {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.card_bom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 60rpx;
|
||||
|
||||
.card_bom_item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_bottom {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -120rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 16rpx 42rpx;
|
||||
|
||||
.card_bottom_Box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.card_bottom_left {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card_bottom_head {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.card_bottom_title {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card_bottom_text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.card_bottom_icon {
|
||||
width: 22.7rpx;
|
||||
height: 22.18rpx;
|
||||
}
|
||||
|
||||
.card_bottom_right_img {
|
||||
width: 132rpx;
|
||||
height: 132rpx;
|
||||
}
|
||||
|
||||
|
||||
.card_bottom_equity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card_bottom_equity_title {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.card_bottom_equity_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.card_bottom_equity_list_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 56rpx;
|
||||
|
||||
.list_item_icon {
|
||||
width: 52rpx;
|
||||
height: 46rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.list_item_text {
|
||||
font-weight: 500;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_bottom.n {
|
||||
padding: 24rpx 42rpx;
|
||||
margin-top: -80rpx;
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 68rpx;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 240rpx;
|
||||
height: 232rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
margin-top: 84rpx;
|
||||
z-index: 10;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitevip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 40rpx;
|
||||
font-size: 20rpx;
|
||||
background: #F4C380;
|
||||
border-radius: 0rpx 12rpx 0rpx 12rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
color: #fff;
|
||||
font-family: Source Han Sans CN-Medium;
|
||||
font-weight: Medium;
|
||||
|
||||
}
|
||||
|
||||
.towcontentitemthere {
|
||||
margin-left: 92rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: Medium;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
|
||||
.towcontentitemtheretext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
padding: 22rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
input {
|
||||
padding-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32rpx;
|
||||
transform: translateY(-50%);
|
||||
content: '¥';
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontentlnage {
|
||||
width: 33.33%;
|
||||
|
||||
.fourcontentitem {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentitems {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
background: #F1CB66;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #F1CB66;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
position: relative;
|
||||
bottom: 44rpx;
|
||||
margin-top: 62rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
background: #F1CB66;
|
||||
}
|
||||
|
||||
// 会员详情
|
||||
.memberdetailsStyle {
|
||||
margin-top: 32rpx;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
background-color: #fff;
|
||||
padding: 32rpx;
|
||||
height: 252rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
>text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,399 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" :src="data.img" mode="aspectFill"></image>
|
||||
<view class="fourcontentitemabsolute">
|
||||
<!-- 年卡会员 -->
|
||||
</view>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="data.store_avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{data.title}}</text>
|
||||
<text class="towcontentitemonetexttow">{{data.show}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemoneabsolute" @click="overlayshow = true">
|
||||
加购
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
{{Number(data.user_sec_y_frequ)}}/{{Number(data.user_sec_z_frequ)}} 次
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">{{data.vip_number || ''}}</text>
|
||||
<text class="towcontentitemtowetext">{{data.end_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
会员详情
|
||||
</view>
|
||||
<view class="therecontentitemone">
|
||||
<!-- <view class="therecontentitemoneiten flex-between" @click="order">
|
||||
<text class="therecontentitemoneitentetxt">账单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view> -->
|
||||
<view class="therecontentitemoneiten flex-between" @click="overlayshow = true">
|
||||
<text class="therecontentitemoneitentetxt">订单明细</text>
|
||||
<u-icon name="arrow-right" color="#808080" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>{{data.store_title}}</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
{{data.title}}
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>¥</text>{{data.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>¥{{data.price}}
|
||||
</view>
|
||||
<view class="fourrecttow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
let res = await this.api.reservationvipdetail({
|
||||
id: e.id
|
||||
})
|
||||
this.data = res
|
||||
console.log(this.data)
|
||||
},
|
||||
methods: {
|
||||
async showpopupclick() {
|
||||
try {
|
||||
let res = await this.api.useropenuserseccrd({
|
||||
id: this.data.id
|
||||
}) //判断是否支付成功
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
width: 80%;
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width:400rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemone {
|
||||
.therecontentitemoneiten:nth-child(1) {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.therecontentitemoneiten {
|
||||
padding: 32rpx 0;
|
||||
border-top: 1px solid #F7F7F7;
|
||||
|
||||
.therecontentitemoneitentetxt {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererect {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.thererectone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererecttow {
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy,
|
||||
PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourrect {
|
||||
margin-top: 44rpx;
|
||||
|
||||
.fourrectone {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold,
|
||||
PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.fourrecttow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,600 @@
|
|||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" :src="data.img" mode="aspectFill"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone" style="color: #fff;">{{data.title}}</text>
|
||||
<text class="towcontentitemonetexttow" style="color: #fff;">{{data.show}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext" style="color: #fff;">¥{{data.price}}<text
|
||||
class="towcontentitemtowetexts" style="color: #fff;">/{{data.frequ}}次</text></text>
|
||||
<text class="towcontentitemtowetext_s" style="color: #fff;">{{data.end_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
商品
|
||||
</view>
|
||||
<view class="therecontentitemtextitem flex-between">
|
||||
<view class="therecontentitemtextitem_left">
|
||||
{{data.title}}
|
||||
</view>
|
||||
<view class="therecontentitemtextitem_right">
|
||||
¥{{data.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitemtextitemt_one">
|
||||
{{data.show}}
|
||||
</view>
|
||||
<view class="therecontentitemtext" style="margin-top: 14rpx;">
|
||||
权益
|
||||
</view>
|
||||
<view class="therecontentitemtextitemt_one">
|
||||
<text style="color: #333333;">{{data.frequ}}次</text>{{data.show}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitem_tow flex-start">
|
||||
手机号码<text>{{data.mobile}}</text>
|
||||
</view>
|
||||
<view class="therecontentitem_tows">
|
||||
该号码不会提供给商家,仅用于接收平台通知信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontentitem">
|
||||
<view class="therecontentitemtext">
|
||||
使用说明
|
||||
</view>
|
||||
<view class="therecontentitemtextthere" style="margin-top: 14rpx;margin-bottom: 30rpx;"
|
||||
v-html="data.notice">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
应付金额:
|
||||
</view>
|
||||
<view class="fixedview_onetow flex-colum-start">
|
||||
<text>¥{{data.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="mobile" class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
<view v-else class="fixedview_tow">
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||
立即付款
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow" @click="overlayshow = false">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-center">
|
||||
<view>【洗剪吹】新娘造型</view>
|
||||
<u-icon @click="overlayshow = false" class="onerecticon" name="backspace" color="#000000"
|
||||
size="28"></u-icon>
|
||||
</view>
|
||||
<view class="towrect">
|
||||
商品
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererectone">
|
||||
年卡会员
|
||||
</view>
|
||||
<view class="thererecttow">
|
||||
<text>¥</text>300
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourrect flex-between">
|
||||
<view class="fourrectone">
|
||||
<text>共计:</text>¥300
|
||||
</view>
|
||||
<view class="fourrecttow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
overlayshow: false,
|
||||
numberbox: "",
|
||||
data: {
|
||||
mobile: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
let res = await this.api.reservationvipdetail({
|
||||
id: e.id
|
||||
})
|
||||
try {
|
||||
this.data = res
|
||||
this.data.notice = res.notice.replace(/\<img/g, '<img style="max-width:100%;height:auto" ');
|
||||
this.data.mobile = uni.cache.get('loginuser').userinfo.mobile
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async onShow() {
|
||||
this.$store.dispatch('storeuseruserinfo')
|
||||
},
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
methods: {
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.usergetwechatphone({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
try {
|
||||
this.mobile = resdata.mobile
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '获取失败'
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
async showpopupclick() {
|
||||
try {
|
||||
let res = await this.api.useropenuserseccrd({
|
||||
id: this.data.id
|
||||
}) //判断是否支付成功
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/my/member/index?e=" + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
order(e) {
|
||||
uni.pro.navigateTo('my/order/index', {
|
||||
e: 0
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
margin-top: 22rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 8rpx 44rpx;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
|
||||
.towcontentitemonetext {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
width: 50%;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
margin-top: 24rpx;
|
||||
background: linear-gradient(318deg, #6E6E6E 0%, #404040 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx #8D8D8D;
|
||||
border-radius: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 68rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.towcontentitemtowetext {
|
||||
font-size: 30rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
|
||||
.towcontentitemtowetexts {
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtowetext_s {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx 32rpx 0 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.therecontentitem_tow {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitem_tows {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.therecontentitemtext {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemtextthere {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.therecontentitemtextitem {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.therecontentitemtextitem_left {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontentitemtextitem_right {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Bold, Roboto;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontentitemtextitemt_one {
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx dashed #F7F7F7;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
button::after {
|
||||
border-radius: 34rpx;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--bg-color-button) !important;
|
||||
padding: 0 !important;
|
||||
line-height: inherit !important;
|
||||
margin: 0 !important;
|
||||
width: auto !important;
|
||||
font-weight: 500 !important;
|
||||
border-radius: none !important;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.warp {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.rect {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 60rpx 60rpx 0px 0px;
|
||||
padding: 48rpx 32rpx 32rpx 32rpx;
|
||||
|
||||
.onerect {
|
||||
position: relative;
|
||||
padding-bottom: 48rpx;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererect {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.thererectone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.thererecttow {
|
||||
text {
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Heavy,
|
||||
PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourrect {
|
||||
margin-top: 44rpx;
|
||||
|
||||
.fourrectone {
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
font-size: 40rpx;
|
||||
font-family: PingFang SC-Bold,
|
||||
PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FC5F69;
|
||||
}
|
||||
|
||||
.fourrecttow {
|
||||
background: linear-gradient(143deg, #8689AF 0%, #494A5F 100%);
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/my/recharges.png"
|
||||
mode="widthFix"></image>
|
||||
<!-- <view class="fourcontentitemabsolute">
|
||||
{{memberlist.store_title}}
|
||||
</view> -->
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="memberlist.store_avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{nickname || '暂无昵称'}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
可用余额:{{memberlist.money || '0.00'}}
|
||||
<!-- <text style="font-size: 16rpx; color:#000 ; margin-left: 10rpx;">冻结金额:{{memberlist.freeze_money}}</text> -->
|
||||
<!-- <view class="towcontentitemoneabsolute">
|
||||
加购
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">{{memberlist.vip_number}}</text>
|
||||
<!-- <text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<input type="number" v-model="amount" placeholder="自定义金额">
|
||||
</view>
|
||||
<view class="fourcontent flex-start">
|
||||
<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
|
||||
<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
|
||||
@click="clickinput(item,index)">
|
||||
<text>充{{item.amount}}元</text>
|
||||
<text style="margin-top: 10rpx;">送{{item.deliver}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent" @click="userbalancerechangesub">
|
||||
立即充值
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nickname: uni.cache.get('loginuser').userinfo.nickname,
|
||||
inputshow: 0,
|
||||
memberlist: {},
|
||||
listdata: [],
|
||||
amount: '',
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
// console.log(e)
|
||||
// this.memberlist = e
|
||||
this.useruserbalance()
|
||||
},
|
||||
onShow() {
|
||||
this.userbalancerechange()
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async useruserbalance(){
|
||||
let res = await this.api.useruserbalance({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
|
||||
})
|
||||
this.memberlist = res
|
||||
},
|
||||
async userbalancerechange() {
|
||||
let res = await this.api.userbalancerechange({
|
||||
store_id: uni.cache.get('store_id') // 判断显示哪家的作品,
|
||||
})
|
||||
this.listdata = res
|
||||
this.amount = res[0].amount
|
||||
},
|
||||
async userbalancerechangesub() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
title: '金额不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.userbalancerechangesub({
|
||||
amount: this.amount,
|
||||
store_id: this.memberlist.store_id
|
||||
})
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.payAppId, // 微信支付商户号
|
||||
timeStamp: res.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.paynonceStr, // 随机字符串
|
||||
package: res.payPackage, // 固定值
|
||||
signType: res.paySignType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
clickinput(a, b) {
|
||||
console.log(a, b)
|
||||
this.inputshow = b
|
||||
this.amount = a.amount
|
||||
},
|
||||
eeInfo(e) {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
font-size: 32rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 0 44rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 42rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
padding: 22rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
input {
|
||||
padding-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32rpx;
|
||||
transform: translateY(-50%);
|
||||
content: '¥';
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontentlnage {
|
||||
width: 33.33%;
|
||||
|
||||
.fourcontentitem {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentitems {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
background: var(--bg-color-button);
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
margin-top: 62rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
background: var(--bg-color-button);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="t"></text>
|
||||
</view>
|
||||
<view class="code-wrap">
|
||||
<view class="num-wrap">
|
||||
<text class="t">账户余额:</text>
|
||||
<text class="num">{{formInfo.shopInfo.amount || '0'}}</text>
|
||||
</view>
|
||||
<view class="line-code">
|
||||
<canvas id="barcodeCanvas" style="width: 300px; height: 100px;"></canvas>
|
||||
</view>
|
||||
<view class="ewm-wrap">
|
||||
<!-- <tki-qrcode show :size="qrcodeSize"></tki-qrcode> -->
|
||||
<up-qrcode size="200" :val="formInfo.url" background="#fff" foreground="#000"></up-qrcode>
|
||||
</view>
|
||||
<view class="name">
|
||||
<text>使用门店:{{formInfo.shopInfo.shopName || '--'}}</text>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
import {
|
||||
APIshopUsercode
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
|
||||
const formInfo = reactive({
|
||||
shopInfo:uni.cache.get('orderVIP'),
|
||||
url: '',
|
||||
shopId: ''
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const pageParams = currentPage.options;
|
||||
// formInfo.shopInfo = JSON.parse(decodeURIComponent(pageParams.shopInfo))
|
||||
formInfo.shopId = pageParams.shopId
|
||||
let res = await APIshopUsercode({
|
||||
shopId: pageParams.shopId
|
||||
})
|
||||
if (res) {
|
||||
formInfo.url = res;
|
||||
try {
|
||||
// nextTick(() => {
|
||||
// const query = uni.createSelectorQuery();
|
||||
// query.select('#barcodeCanvas')
|
||||
// .fields({
|
||||
// node: true,
|
||||
// size: true
|
||||
// })
|
||||
// .exec((res) => {
|
||||
// if (res[0]) {
|
||||
// const canvas = res[0].node;
|
||||
// const ctx = canvas.getContext('2d');
|
||||
// const dpr = uni.getSystemInfoSync().pixelRatio;
|
||||
// canvas.width = res[0].width * dpr;
|
||||
// canvas.height = res[0].height * dpr;
|
||||
// ctx.scale(dpr, dpr);
|
||||
|
||||
// JsBarcode(canvas, formInfo.url, {
|
||||
// width: 2,
|
||||
// height: 100,
|
||||
// displayValue: true,
|
||||
// fontOptions: 'bold',
|
||||
// font: 'monospace',
|
||||
// textAlign: 'center',
|
||||
// textPosition: 'bottom',
|
||||
// textMargin: 2,
|
||||
// fontSize: 20,
|
||||
// background: '#ffffff',
|
||||
// lineColor: '#000000'
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #eb6c37;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 40upx;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding-bottom: 40upx;
|
||||
|
||||
.t {
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
padding-bottom: 20upx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-bottom: 1upx solid #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-wrap {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 40upx;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #eb6c37;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::before {}
|
||||
|
||||
&::after {}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.num {
|
||||
font-size: 42upx;
|
||||
position: relative;
|
||||
top: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.line-code {
|
||||
padding: 40upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ewm-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40upx 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #ececec;
|
||||
position: absolute;
|
||||
top: calc(42% + 20upx);
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 条形码 -->
|
||||
<view class="barcode-container">
|
||||
<text>条形码:</text>
|
||||
</view>
|
||||
|
||||
<!-- 二维码 -->
|
||||
<view class="qrcode-container">
|
||||
<text>二维码:</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
// 条形码和二维码的值
|
||||
const barcodeValue = ref('1234567890');
|
||||
const qrcodeValue = ref('https://www.example.com');
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.barcode-container,
|
||||
.qrcode-container {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
<template>
|
||||
<view class="Box">
|
||||
<view class="box_box">
|
||||
<!-- <view class="box_item flex-between">
|
||||
<text class="top_box_one_text">当前账号</text>
|
||||
<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" disabled="disabled" />
|
||||
<button v-if="!form.mobile" class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<view class="text">获取手机号</view>
|
||||
</button>
|
||||
</view> -->
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">当前账号</text>
|
||||
<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" :disabled="true" />
|
||||
|
||||
</view>
|
||||
<view class="box_item flex-between" style="position:relative;">
|
||||
<text class="top_box_one_text"></text>
|
||||
<input type="number" v-model="form.checkCode" placeholder="请输入验证码"
|
||||
style="padding-right: 140rpx;color: #333" />
|
||||
<view class="top_box_one_texts">
|
||||
<view v-if="datalist.showText == true" class="yzm" @click="CodeRegister">{{ datalist.Recapture }}
|
||||
</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ datalist.second }}s重新发送
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">新密码</text>
|
||||
<input type="number" v-model="form.password" placeholder="请输入6位数字交易密码" maxlength="6"
|
||||
:password="!passwords" />
|
||||
</view>
|
||||
<view class="box_item flex-between">
|
||||
<text class="top_box_one_text">确认密码</text>
|
||||
<input type="number" v-model="form.payPassword" placeholder="请再次输入密码" maxlength="6"
|
||||
:password="!payPasswords" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" :class="(form.checkCode!=''&&form.password!=''&&form.payPassword!='')?'active':''"
|
||||
@click="userInfosavePayPassword">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
APIuserpwd,
|
||||
APIusercode
|
||||
} from '@/common/api/api.js'
|
||||
import {
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
const storeuser = productStore();
|
||||
const shopUserInfo = reactive({
|
||||
shopInfo: uni.cache.get('orderVIP'),
|
||||
shopId: ''
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
mobile: uni.cache.get('orderVIP').phone,
|
||||
password: '',
|
||||
payPassword: '',
|
||||
checkCode: ''
|
||||
})
|
||||
|
||||
const datalist = reactive({
|
||||
isPwd: "",
|
||||
passwords: false,
|
||||
payPasswords: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '获取验证码',
|
||||
})
|
||||
|
||||
const CodeRegister = async () => {
|
||||
const res = await APIusercode({
|
||||
// post 手机验证码
|
||||
phone: form.mobile
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
datalist.showText = false;
|
||||
datalist.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --datalist.second;
|
||||
datalist.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
datalist.second = 60;
|
||||
datalist.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取手机号
|
||||
* @param {Object} d
|
||||
*/
|
||||
const getPhone = async (d) => {
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
console.log(data)
|
||||
let res = await this.api.userwxlogins({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
})
|
||||
// form.mobile = res ? (res.slice(0, 3) + '****' + res.slice(7)) : '';
|
||||
form.mobile = res
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const loginwxuserInfo = async () => {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
}
|
||||
}
|
||||
|
||||
const userInfosavePayPassword = async () => {
|
||||
if (form.mobile.length != 11) {
|
||||
uni.showToast({
|
||||
title: '手机号必须是11位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (form.password == null || form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (form.payPassword == null || form.payPassword == '') {
|
||||
uni.showToast({
|
||||
title: '请输入确认密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (form.password.length != 6 || form.payPassword.length != 6) {
|
||||
uni.showToast({
|
||||
title: '密码必须是6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (form.payPassword != form.password) {
|
||||
uni.showToast({
|
||||
title: '密码和确认密码不一致',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (form.checkCode == null || form.checkCode == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let res = await APIuserpwd({
|
||||
checkPayPwd: form.payPassword,
|
||||
payPwd: form.password,
|
||||
code: form.checkCode
|
||||
})
|
||||
// * 获取会员信息
|
||||
await storeuser.actionsproductqueryProduct()
|
||||
if (res) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
// if (options.shopId) {
|
||||
// let res = await APIshopUserInfo({F
|
||||
// shopId: options.shopId
|
||||
// })
|
||||
// uni.cache.set('shopId', options.shopId, 30)
|
||||
// uni.cache.set('orderVIP', res)
|
||||
// uni.cache.set('ordershopUserInfo', res.shopInfo)
|
||||
// } else {
|
||||
// shopUserInfo.shopInfo = JSON.parse(decodeURIComponent(options.shopInfo))
|
||||
// }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.Box {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.box_one {
|
||||
margin-top: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.box_box {
|
||||
background: #fff;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.box_item {
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
position: relative;
|
||||
|
||||
.top_box_one_text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 26rpx 0;
|
||||
width: 75%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.top_box_one_texts {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
|
||||
.yzm {
|
||||
padding: 8rpx 20rpx;
|
||||
background: #E5E5E5;
|
||||
border-radius: 24rpx;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_item:nth-child(1) {
|
||||
border-bottom: none;
|
||||
border-top: 1rpx solid #E5E5E5;
|
||||
|
||||
input {
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 56rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
background-color: #999;
|
||||
border-radius: 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Box_bottom.active {
|
||||
background-color: #E3AD7F;
|
||||
}
|
||||
}
|
||||
|
||||
.getPhone {
|
||||
line-height: initial;
|
||||
background-color: none;
|
||||
border: 2rpx solid #E3AD7F;
|
||||
color: #E3AD7F;
|
||||
font-size: 28rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="list_item" @click="handleClick(item)" v-for="(item,index) in list" :key="index">
|
||||
<view>{{ item.name }}</view>
|
||||
<u-icon name="arrow-right" color="#575B66" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
|
||||
const list = ref([
|
||||
// {
|
||||
// name: "余额明细",
|
||||
// url: "user/member/billDetails"
|
||||
// },
|
||||
{
|
||||
name: "密码设置",
|
||||
url: "user/member/setPassword"
|
||||
},
|
||||
{
|
||||
name: "使用须知",
|
||||
url: "user/member/instructions"
|
||||
},
|
||||
])
|
||||
|
||||
const shopUserInfo = reactive({
|
||||
shopInfo: "",
|
||||
shopId: ''
|
||||
})
|
||||
|
||||
// 跳转
|
||||
const handleClick = (item) => {
|
||||
uni.pro.navigateTo(item.url, {
|
||||
shopInfo: JSON.stringify(shopUserInfo.shopInfo)
|
||||
})
|
||||
}
|
||||
|
||||
//
|
||||
onMounted(async () => {
|
||||
// 获取当前页面栈
|
||||
const pages = getCurrentPages();
|
||||
// 获取当前页面实例
|
||||
const currentPage = pages[pages.length - 1];
|
||||
// 获取页面参数
|
||||
const options = currentPage.options;
|
||||
shopUserInfo.shopId = options.shopId
|
||||
shopUserInfo.shopInfo = JSON.parse(decodeURIComponent(options.shopInfo))
|
||||
console.log(shopUserInfo)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
page {}
|
||||
|
||||
.container {
|
||||
padding: 48rpx 20rpx;
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.list_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
;
|
||||
padding: 24rpx 0;
|
||||
|
||||
view {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.list_item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,453 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="info_list">
|
||||
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">头像</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="list_item_right_head" @click="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">昵称</view>
|
||||
<view class="list_item_right" style="width: 100%;">
|
||||
<u-input v-model="nickName" type="text" input-align="right" placeholder="请输入不支持特殊字符10个字以内" :custom-style="{color:'#333',fontSize: '28rpx',border:'none'}" placeholder-style="color:#999;font-size: 28rpx"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">账号</view>
|
||||
<view class="list_item_right ">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="phone" v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhone" @error="getPhoneError">
|
||||
<!-- #endif -->
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">请授权手机号</view>
|
||||
</view>
|
||||
</button>
|
||||
<view v-else >
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">{{phonetitle }}</view>
|
||||
<view class="place">绑定的手机号不能修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">性别</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="sexShow = true">{{sexText}}</view>
|
||||
<u-picker @cancel="sexShow = false" itemHeight="66" :show="sexShow" :columns="sexList" keyName="label" @confirm="confirmSex"></u-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">生日</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="calendarShow = (birthDay ? false : true)"> {{ birthDay || '生日一旦填写不能修改'}}</view>
|
||||
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
||||
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
||||
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
||||
<u-datetime-picker
|
||||
mode="date"
|
||||
itemHeight="90"
|
||||
visibleItemCount="5"
|
||||
@cancel="calendarShow = false"
|
||||
:show="calendarShow"
|
||||
:minDate="-2208988800000"
|
||||
v-model="value1"
|
||||
@confirm="confirmTime"
|
||||
></u-datetime-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item" @click="boxClick">
|
||||
<view class="list_item_left">绑定微信</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="text r">已绑定</view>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save active" @click="$u.debounce(sumbit, 500)">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
sexShow: false,
|
||||
calendarShow: false,
|
||||
sexText: '请选择',
|
||||
value1: Number(new Date()),
|
||||
form: {
|
||||
sex: 1,
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
sexList: [
|
||||
[{
|
||||
value: 1,
|
||||
label: '男'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女'
|
||||
},]
|
||||
],
|
||||
|
||||
userInfo: uni.cache.get('userInfo'),
|
||||
userHeadImg: "",
|
||||
nickName: '',
|
||||
birthDay: "",
|
||||
mobile: "",
|
||||
phonetitle: ""
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.userHeadImg = this.userInfo.headImg;
|
||||
this.nickName = this.userInfo.nickName;
|
||||
this.sex = this.userInfo.sex;
|
||||
if ( this.userInfo.sex != null ) {
|
||||
this.sexText = this.userInfo.sex == 1 ? '男' : '女';
|
||||
}
|
||||
this.birthDay = this.userInfo.birthDay;
|
||||
this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo.telephone.substr(7)) : ""
|
||||
this.mobile = this.userInfo.telephone;
|
||||
this.date = this.getDate({ format: true})
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 确定生日
|
||||
* @param {Object} e
|
||||
*/
|
||||
confirmTime(e) {
|
||||
this.calendarShow = false;
|
||||
this.birthDay = this.getDate(e.value);
|
||||
},
|
||||
|
||||
/**
|
||||
* 确定性别
|
||||
* @param {Object} e
|
||||
*/
|
||||
confirmSex(e) {
|
||||
this.sexShow = false;
|
||||
this.sex = e.value[0].value;
|
||||
this.sexText = e.value[0].label;
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
getDate(time) { //年月日
|
||||
const date = new Date(time);
|
||||
// const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取手机号
|
||||
* @param {Object} d
|
||||
*/
|
||||
async getPhone(d) {
|
||||
console.log(d)
|
||||
// #ifdef MP-WEIXIN
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
// 微信小程序环境
|
||||
console.log(data)
|
||||
let res = await this.api.userwxlogins({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
source: "wechar"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序环境
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_user',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let authCode = res.authCode;
|
||||
my.getPhoneNumber({
|
||||
success: async (data) => {
|
||||
let res = await this.api.userwxlogins({
|
||||
// code: authCode,
|
||||
encryptedData: JSON.parse(data.response).response,
|
||||
source: "alipay"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
getPhoneError (e) {
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消绑定/退出登录
|
||||
*/
|
||||
boxClick() {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定要取消绑定吗?',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await this.api.loginOut();
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
uni.cache.clear();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
* @param {Object} e
|
||||
*/
|
||||
onChooseAvatar(e) {
|
||||
let _this = this;
|
||||
//#ifdef MP-WEIXIN
|
||||
let avatarUrl = e.detail.avatarUrl
|
||||
uni.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType:'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let { data } = JSON.parse(uploadFileRes.data)
|
||||
this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
//#ifdef MP-ALIPAY
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9,设置图片的数量
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
|
||||
success: function (res) {
|
||||
// 成功选择图片后
|
||||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||||
|
||||
my.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType:'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let { data } = JSON.parse(uploadFileRes.data)
|
||||
_this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
|
||||
// #endif
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
async sumbit() {
|
||||
let res = await this.api.upUserInfo({
|
||||
headImg: this.userHeadImg,
|
||||
nickName: this.nickName,
|
||||
sex: this.sex,
|
||||
birthDay: this.birthDay,
|
||||
telephone: this.mobile,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container{
|
||||
|
||||
::v-deep .u-input input{
|
||||
background-color: transparent;
|
||||
}
|
||||
.info_list{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
.list_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
.list_item_left{
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.list_item_right{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.list_item_right_head{
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 16rpx;
|
||||
padding: 0;
|
||||
}
|
||||
.phone{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
// #ifdef MP-ALIPAY
|
||||
display: initial;
|
||||
// #endif
|
||||
}
|
||||
.place{
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: initial;
|
||||
}
|
||||
.text{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.r{
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
button{
|
||||
outline: none;
|
||||
text{
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
button:active {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.save{
|
||||
width: 502rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background-color: #E0E0E0;
|
||||
border-radius: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
.save.active{
|
||||
background-color: #E3AD7F;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,427 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<view class="info_list">
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">头像</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="list_item_right_head" type="default" open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="list_item_right_head" @click="onChooseAvatar">
|
||||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">昵称</view>
|
||||
<view class="list_item_right" style="width: 100%;">
|
||||
<u-input v-model="nickName" type="text" input-align="right" placeholder="请输入不支持特殊字符10个字以内"
|
||||
:custom-style="{color:'#333',fontSize: '28rpx',border:'none'}"
|
||||
placeholder-style="color:#999;font-size: 28rpx" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">账号</view>
|
||||
<view class="list_item_right ">
|
||||
<!-- #ifdef H5 -->
|
||||
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber'
|
||||
@getAuthorize="getPhone" @error="getPhoneError">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="phone" v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber'
|
||||
@getAuthorize="getPhone" @error="getPhoneError">
|
||||
<!-- #endif -->
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">请授权手机号</view>
|
||||
</view>
|
||||
</button>
|
||||
<view v-else>
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">{{phonetitle }}</view>
|
||||
<view class="place">绑定的手机号不能修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">性别</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="sexShow = true">{{sexText}}</view>
|
||||
<u-picker @cancel="sexShow = false" itemHeight="66" :show="sexShow" :columns="sexList"
|
||||
keyName="label" @confirm="confirmSex"></u-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item">
|
||||
<view class="list_item_left">生日</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="place r" @click="calendarShow = (birthDay ? false : true)">
|
||||
{{ birthDay || '生日一旦填写不能修改'}}
|
||||
</view>
|
||||
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
||||
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
||||
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
||||
<u-datetime-picker mode="date" itemHeight="90" visibleItemCount="5" @cancel="calendarShow = false"
|
||||
:show="calendarShow" :minDate="-2208988800000" v-model="value1"
|
||||
@confirm="confirmTime"></u-datetime-picker>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item" @click="boxClick">
|
||||
<view class="list_item_left">绑定微信</view>
|
||||
<view class="list_item_right flex-center">
|
||||
<view class="text r">已绑定</view>
|
||||
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save active" @click="$u.debounce(sumbit, 500)">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
|
||||
const sexShow = ref(false)
|
||||
const calendarShow = ref(false)
|
||||
const sexText = ref('请选择')
|
||||
const value1 = ref(Number(new Date()))
|
||||
const listinfo = reactive({
|
||||
form: {
|
||||
sex: 1,
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
sexList: [
|
||||
[{
|
||||
value: 1,
|
||||
label: '男'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
label: '女'
|
||||
},
|
||||
]
|
||||
],
|
||||
})
|
||||
|
||||
const userInfo = uni.cache.get('shopUserInfo')
|
||||
// this.userInfo = uni.cache.get('userInfo')
|
||||
// this.userHeadImg = this.userInfo.headImg;
|
||||
// this.nickName = this.userInfo.nickName;
|
||||
// this.sex = this.userInfo.sex;
|
||||
// if (this.userInfo.sex != null) {
|
||||
// this.sexText = this.userInfo.sex == 1 ? '男' : '女';
|
||||
// }
|
||||
// this.birthDay = this.userInfo.birthDay;
|
||||
// this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo
|
||||
// .telephone.substr(7)) : ""
|
||||
// this.mobile = this.userInfo.telephone;
|
||||
// this.date = this.getDate({
|
||||
// format: true
|
||||
// })
|
||||
const confirmTime = (e) => {
|
||||
this.calendarShow = false;
|
||||
this.birthDay = this.getDate(e.value);
|
||||
}
|
||||
|
||||
const confirmSex = (e) => {
|
||||
this.sexShow = false;
|
||||
this.sex = e.value[0].value;
|
||||
this.sexText = e.value[0].label;
|
||||
}
|
||||
|
||||
const getDate = (time) => { //年月日
|
||||
const date = new Date(time);
|
||||
// const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// 获取手机号
|
||||
const getPhone = (d) => {
|
||||
console.log(d)
|
||||
// #ifdef MP-WEIXIN
|
||||
if (d.detail.iv) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
// 微信小程序环境
|
||||
console.log(data)
|
||||
let res = await this.api.userwxlogins({
|
||||
code: data.code,
|
||||
encryptedData: d.detail.encryptedData,
|
||||
iv: d.detail.iv,
|
||||
source: "wechar"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
// 支付宝小程序环境
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_user',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let authCode = res.authCode;
|
||||
my.getPhoneNumber({
|
||||
success: async (data) => {
|
||||
let res = await this.api.userwxlogins({
|
||||
// code: authCode,
|
||||
encryptedData: JSON.parse(data.response).response,
|
||||
source: "alipay"
|
||||
})
|
||||
this.phonetitle = res.data.substr(0, 3) + "****" + res.data
|
||||
.substr(7)
|
||||
this.mobile = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
const boxClick = () => {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '确定要取消绑定吗?',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await this.api.loginOut();
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
uni.cache.clear();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 上传头像
|
||||
const onChooseAvatar = (e) => {
|
||||
let _this = this;
|
||||
//#ifdef MP-WEIXIN
|
||||
let avatarUrl = e.detail.avatarUrl
|
||||
uni.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType: 'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
//#ifdef MP-ALIPAY
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认9,设置图片的数量
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
|
||||
success: function(res) {
|
||||
// 成功选择图片后
|
||||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||||
|
||||
my.uploadFile({
|
||||
url: uni.conf.baseUrl + '/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
'content-type': 'multipart/form-data'
|
||||
},
|
||||
fileType: 'image',
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
_this.userHeadImg = data
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
const sumbit = async () => {
|
||||
let res = await this.api.upUserInfo({
|
||||
headImg: this.userHeadImg,
|
||||
nickName: this.nickName,
|
||||
sex: this.sex,
|
||||
birthDay: this.birthDay,
|
||||
telephone: this.mobile,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
::v-deep .u-input input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.info_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.list_item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
|
||||
.list_item_left {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list_item_right {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
.list_item_right_head {
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 16rpx;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.phone {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
// #ifdef MP-ALIPAY
|
||||
display: initial;
|
||||
// #endif
|
||||
}
|
||||
|
||||
.place {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.r {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
|
||||
text {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save {
|
||||
width: 502rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background-color: #E0E0E0;
|
||||
border-radius: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.save.active {
|
||||
background-color: #E3AD7F;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,223 +0,0 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view v-if="isPwd == 0">
|
||||
<view class="contenttext flex-center">
|
||||
{{form.password.length == 6?'请再次确认支付密码':"请设置新密码,用于支付验证"}}
|
||||
</view>
|
||||
<view class="contentbox flex-between">
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(0,1)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(1,2)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(2,3)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(3,4)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(4,5)}}
|
||||
</view>
|
||||
<view class="contentboxitem flex-colum">
|
||||
{{consumeFee.slice(5,6)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-else>
|
||||
|
||||
</view>
|
||||
<cwx-keyboard ref="keyboard" v-if="isPwd == 0" @confirmEvent="confirmEvent"
|
||||
:money.sync="consumeFee"></cwx-keyboard>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
|
||||
export default {
|
||||
components: {
|
||||
cwxKeyboard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPwd: uni.cache.get('userInfo').isPwd,
|
||||
form: {
|
||||
mobile: uni.cache.get('userInfo').telephone,
|
||||
password: '', //密码
|
||||
payPassword: '', //二次密码
|
||||
checkCode: ''
|
||||
},
|
||||
passwords: false,
|
||||
payPasswords: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码',
|
||||
consumeFee: '', //第一遍
|
||||
consumeFees: '', //第二遍
|
||||
money: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '忘记支付密码', // 标题文本,必须是字符串
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
consumeFee(newVal, oldVal) {
|
||||
if (this.form.password.length == 6) {
|
||||
this.form.payPassword = newVal
|
||||
if (this.form.payPassword.length == 6) {
|
||||
this.userInfosavePayPassword()
|
||||
}
|
||||
} else {
|
||||
this.form.password = newVal
|
||||
if (this.form.password.length == 6) {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmEvent(e) {
|
||||
console.log(e)
|
||||
},
|
||||
async CodeRegister() {
|
||||
const res = await this.api.phoneValidateCode({
|
||||
// post 手机验证码
|
||||
phone: this.form.mobile
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '验证码获取成功',
|
||||
icon: 'none'
|
||||
});
|
||||
// 定时器
|
||||
this.showText = false;
|
||||
this.Recapture = '重新获取';
|
||||
var interval = setInterval(() => {
|
||||
let times = --this.second;
|
||||
this.second = times < 10 ? '0' + times : times; //小于10秒补 0
|
||||
}, 1000);
|
||||
setTimeout(() => {
|
||||
clearInterval(interval);
|
||||
this.second = 60;
|
||||
this.showText = true;
|
||||
}, 60000);
|
||||
}
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.getStorageSync('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
}
|
||||
},
|
||||
async userInfosavePayPassword() {
|
||||
if (this.form.mobile.length != 11 && this.isPwd == 0) {
|
||||
uni.showToast({
|
||||
title: '手机号必须是11位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '') {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword == null || this.form.payPassword == '') {
|
||||
uni.showToast({
|
||||
title: '请输入确认密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password.length != 6 || this.form.payPassword.length != 6) {
|
||||
uni.showToast({
|
||||
title: '密码必须是6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.payPassword != this.form.password) {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
this.form.payPassword = ''
|
||||
this.form.password = ''
|
||||
uni.showToast({
|
||||
title: '密码和确认密码不一致',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.checkCode == null || this.form.checkCode == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.loginresetPwd({
|
||||
pwd: this.form.password,
|
||||
code: this.form.checkCode
|
||||
})
|
||||
|
||||
if (res.code == 0) {
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '设置成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
// 获取用户信息
|
||||
this.loginwxuserInfo()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$refs.keyboard._handleClearKey() //清空
|
||||
this.form.payPassword = ''
|
||||
this.form.password = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contenttext {
|
||||
padding: 48rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
margin-top: 48rpx;
|
||||
padding: 0 56rpx;
|
||||
|
||||
.contentboxitem {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +1,45 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<image class="topBack"
|
||||
:src="shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
|
||||
:src="userInfo.shopExtendList?(userInfo.shopExtendList[1].value?userInfo.shopExtendList[1].value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'):'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'"
|
||||
mode="aspectFill"></image>
|
||||
<view class="myContent">
|
||||
<view class="my_info flex-between">
|
||||
<view class="my_info_left">
|
||||
<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
|
||||
<view class="name">{{userInfo.nickName || '无'}}</view>
|
||||
<view class="name">{{userInfo.nickName}}</view>
|
||||
</view>
|
||||
<image class="my_info_right_qr" @click="clickEvent" v-if="shopInfo.isVip!=0"
|
||||
<image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
|
||||
</image>
|
||||
<view class="my_info_right" @click="clickEvent" v-else>
|
||||
<view class="my_info_right" @click="clickEvent" v-if="userInfo.isVip == 0 && ShopId">
|
||||
<text>免费入会</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="my_item my_assets">
|
||||
<view class="my_item my_assets" @click="Myassets">
|
||||
<view class="my_item_title">我的资产</view>
|
||||
<view class="my_assets_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myAssetsList"
|
||||
:key="index">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
<view class="my_list_item_num">{{item.num || '**'}}</view>
|
||||
<view class="my_list_item">
|
||||
<image class="my_list_item_icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="my_list_item_name">储值</view>
|
||||
<view class="my_list_item_num">{{userInfo.amount || '0'}}</view>
|
||||
</view>
|
||||
<view class="my_list_item">
|
||||
<image class="my_list_item_icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png">
|
||||
</image>
|
||||
<view class="my_list_item_name">积分</view>
|
||||
<view class="my_list_item_num">{{userInfo.accountPoints || 0}}</view>
|
||||
</view>
|
||||
<view class="my_list_item">
|
||||
<image class="my_list_item_icon"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png">
|
||||
</image>
|
||||
<view class="my_list_item_name">优惠券</view>
|
||||
<view class="my_list_item_num">{{userInfo.couponNum ||'0'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -33,8 +47,8 @@
|
|||
<view class="my_item my_fun">
|
||||
<view class="my_item_title">我的功能</view>
|
||||
<view class="my_fun_list">
|
||||
<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myFunList"
|
||||
:key="index">
|
||||
<view class="my_list_item" v-for="(item,index) in myFunList" :key="index"
|
||||
@click="clickTo(item,index)">
|
||||
<view class="my_list_item_left">
|
||||
<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
|
||||
<view class="my_list_item_name">{{item.name}}</view>
|
||||
|
|
@ -63,28 +77,10 @@
|
|||
onReady,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
const myAssetsList = ref([
|
||||
[{
|
||||
name: "储值",
|
||||
type: "recharge",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
|
||||
},
|
||||
{
|
||||
name: "积分",
|
||||
type: "points",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"
|
||||
},
|
||||
{
|
||||
name: "优惠券",
|
||||
type: "my_coupon",
|
||||
num: 0,
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png"
|
||||
},
|
||||
// { name: "权益卡", type: "", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/equityCard.png"}
|
||||
]
|
||||
])
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
const store = productStore();
|
||||
const myFunList = ref([{
|
||||
name: "我的优惠券",
|
||||
type: "my_coupon",
|
||||
|
|
@ -96,11 +92,11 @@
|
|||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
|
||||
},
|
||||
// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
|
||||
{
|
||||
name: "个人资料",
|
||||
type: "my_info",
|
||||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
|
||||
},
|
||||
// {
|
||||
// name: "个人资料",
|
||||
// type: "myself",
|
||||
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
|
||||
// },
|
||||
{
|
||||
name: "我的会员卡",
|
||||
type: "my_member",
|
||||
|
|
@ -108,15 +104,108 @@
|
|||
},
|
||||
// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
|
||||
])
|
||||
const shopInfo = reactive({
|
||||
isVip: 0
|
||||
|
||||
const userInfo = reactive({})
|
||||
|
||||
const ShopId = ref(uni.cache.get('shopId'))
|
||||
|
||||
|
||||
const clickEvent = () => {
|
||||
if (ShopId.value) {
|
||||
if (userInfo.isVip == 0) {
|
||||
uni.pro.navigateTo('user/member/memberdetails', {
|
||||
shopId: uni.cache.get('shopId')
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('user/member/paycode', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.pro.navigateTo('member/list', {
|
||||
type: 'user_payCode'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 我的资产
|
||||
const Myassets = () => {
|
||||
if (uni.cache.get('shopId')) {
|
||||
uni.pro.navigateTo('user/member/memberdetails', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'index'
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('user/member/list', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'index'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const clickTo = (item, index) => {
|
||||
let shopId = null;
|
||||
switch (item.type) {
|
||||
case 'my_order':
|
||||
uni.pro.switchTab('order/index')
|
||||
break
|
||||
case 'my_member':
|
||||
uni.pro.navigateTo('user/member/list')
|
||||
break
|
||||
case 'recharge':
|
||||
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
||||
uni.pro.navigateTo('member/index', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'index',
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('member/list', {
|
||||
type: 'user_recharge'
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'points': //积分
|
||||
if (uni.cache.get('shopId') && uni.cache.get('token')) {
|
||||
uni.pro.navigateTo('/pagesPoints/index/index', {
|
||||
shopId: uni.cache.get('shopId'),
|
||||
type: 'user',
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('member/list', {
|
||||
type: 'user_points'
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 'my_coupon': //优惠券
|
||||
uni.pro.navigateTo('user/coupon', {
|
||||
shopId: uni.cache.get('shopId') || ''
|
||||
})
|
||||
break;
|
||||
case 'myself': //内部页面
|
||||
uni.pro.navigateTo('user/myself')
|
||||
break;
|
||||
case 'scan_applet':
|
||||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||||
break
|
||||
case 'absolute': //外链url
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/webview?url=${item.menuUrl}`
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
onShow(() => {
|
||||
store.actionsAPIuser()
|
||||
if (uni.cache.get('shopId')) {
|
||||
Object.assign(userInfo, uni.cache.get('orderVIP'))
|
||||
} else {
|
||||
Object.assign(userInfo, {
|
||||
...uni.cache.get('userInfo'),
|
||||
...uni.cache.get('userInfo').assetsSummary
|
||||
})
|
||||
}
|
||||
})
|
||||
const userInfo = reactive({
|
||||
nickName: '无名',
|
||||
headImg: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png'
|
||||
})
|
||||
const teblist = ref([])
|
||||
const shopExtend = ref(null)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="121" height="120" viewBox="0 0 121 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_38)">
|
||||
<circle cx="60.2939" cy="60" r="58.5" stroke="white" stroke-width="3"/>
|
||||
<circle cx="60.2938" cy="60" r="51.1997" stroke="white" stroke-width="2" stroke-dasharray="2 2"/>
|
||||
<line x1="19.8277" y1="50.637" x2="82.4435" y2="27.8676" stroke="white"/>
|
||||
<line x1="36.7388" y1="93.3029" x2="99.3547" y2="70.5335" stroke="white"/>
|
||||
<path d="M22.4599 62.0201C23.1265 62.5176 23.7976 63.0902 24.4821 63.7599L32.6011 60.8049L33.2304 62.3625L16.5189 68.445L18.5688 73.5186C20.4655 78.4692 21.3126 82.6787 21.0559 86.1414L19.2488 85.4463C19.4643 82.4581 18.6888 78.6819 16.8999 74.126L14.2207 67.4948L22.7005 64.4084C22.0609 63.8499 21.4032 63.3746 20.7815 62.9883L22.4599 62.0201ZM22.7471 66.8928L24.4471 66.6825C24.4958 67.3794 24.5266 68.0319 24.5574 68.6843L33.3529 65.483L33.9193 66.8849L24.56 70.2914C24.5039 71.9454 24.3398 73.4601 24.0676 74.8353L28.285 73.3004L27.1971 70.6078L28.8209 70.0168L29.9088 72.7093L34.938 70.8789L35.5224 72.3253L30.4932 74.1558L31.5001 76.648L38.2433 74.1937L38.8367 75.6623L32.0935 78.1167L33.514 81.6326L31.8902 82.2236L30.4697 78.7077L22.3282 81.671L21.7348 80.2023L29.8763 77.239L28.8694 74.7468L22.9606 76.8974L22.0649 75.6409C22.4993 74.2831 22.7672 72.7051 22.846 70.9153L19.4405 72.1547L18.8741 70.7528L22.8659 69.2999C22.8353 68.5198 22.7957 67.7175 22.7471 66.8928ZM35.6949 60.0106L41.8292 57.7779C41.8077 56.8924 41.7637 56.015 41.6655 55.1319L43.3928 54.7329C43.464 55.5493 43.5261 56.3435 43.5658 57.1459L55.1127 52.9431L55.742 54.5008L43.5862 58.9252C43.5249 61.1426 43.1977 63.2781 42.6272 65.3235L47.2034 76.65L45.6247 77.2246L41.8217 67.8118C41.3876 68.9143 40.9129 69.9804 40.3616 71.0489L38.8343 70.1499C40.6237 66.7675 41.6063 63.2448 41.8045 59.5736L36.3242 61.5683L35.6949 60.0106ZM45.8068 68.1992L52.3471 65.8187L51.511 63.7492C52.5088 62.5693 53.394 61.3027 54.1711 59.8967L45.6913 62.9831L45.089 61.4922L55.6436 57.6506L56.246 59.1415C55.4777 60.6974 54.5335 62.2662 53.4045 63.8258L53.9709 65.2277L59.609 63.1756L60.2294 64.711L54.5912 66.7631L56.2905 70.9688C56.8209 72.2817 56.414 73.1955 55.0834 73.6798L52.2644 74.7059L51.2245 73.3487C52.0454 73.0754 52.9114 72.7858 53.836 72.4492C54.5126 72.203 54.7296 71.7156 54.4599 71.048L52.9674 67.3541L46.4272 69.7346L45.8068 68.1992ZM57.6942 50.7528L76.9993 43.7263L77.6286 45.284L70.2313 47.9764C70.194 49.0365 70.08 50.099 69.8894 51.1638L70.303 52.1874C74.7565 52.9658 78.7948 54.125 82.4178 55.6651L81.8432 57.3802C78.698 55.8704 75.0971 54.7051 70.9862 53.8786L75.967 66.2065L74.2981 66.8139L69.1555 54.0855C68.0785 57.4384 66.217 60.7705 63.5756 64.0291L61.9582 63.0352C65.9314 58.2709 68.0832 53.4803 68.4271 48.6331L58.3236 52.3105L57.6942 50.7528ZM82.9851 41.1903L97.1482 36.0354L100.205 43.6012L94.1383 45.8093L95.6308 49.5032L103.073 46.7944L103.702 48.3521L96.2601 51.0609L98.1391 55.7116C99.4425 55.4159 100.989 54.955 102.749 54.3147C104.44 53.6991 105.843 53.1374 106.989 52.6438L107.185 54.4102C105.809 54.9109 104.56 55.3401 103.446 55.7201C99.3998 57.1671 96.5271 57.8043 94.796 57.6176C93.2813 57.4542 91.6187 56.6044 89.8622 55.0741C89.8232 57.5387 89.4373 59.7211 88.6821 61.6296L87.1322 60.7388C88.2721 57.6694 88.4342 54.0369 87.5961 49.8496L89.2916 49.5643C89.5381 50.8784 89.7124 52.1423 89.8056 53.3335C91.7197 55.0617 93.4544 55.9618 95.0413 56.0478C95.4336 56.0582 95.8709 56.0522 96.3669 55.9993L92.492 46.4085L86.0419 48.7561L82.9851 41.1903ZM97.9473 42.6873L96.1222 38.17L85.2293 42.1347L87.0544 46.652L97.9473 42.6873Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_38">
|
||||
<rect width="120" height="120" fill="white" transform="translate(0.293854)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2_36)">
|
||||
<circle cx="60" cy="60" r="58.5" stroke="white" stroke-width="3"/>
|
||||
<circle cx="60" cy="60" r="51.1997" stroke="white" stroke-width="2" stroke-dasharray="2 2"/>
|
||||
<line x1="19.5338" y1="50.637" x2="82.1497" y2="27.8676" stroke="white"/>
|
||||
<line x1="36.445" y1="93.3029" x2="99.0608" y2="70.5335" stroke="white"/>
|
||||
<path d="M57.134 66.8373L60.6344 75.5009L58.4994 76.278L57.912 74.8242L41.9748 80.6248L42.5622 82.0786L40.4272 82.8557L36.9269 74.1921L57.134 66.8373ZM41.2076 78.7259L57.1448 72.9253L55.7423 69.4539L39.8051 75.2546L41.2076 78.7259ZM32.5035 63.2439C31.9245 64.8841 31.2192 66.468 30.3698 68.0364L28.8571 66.1707C30.8456 62.2138 31.8241 58.3182 31.7745 54.5246L34.0473 54.1738C34.046 55.1952 34.0028 56.1979 33.8994 57.2225L41.3568 54.5083C40.4981 53.6637 39.6574 52.9487 38.7805 52.3149L40.8618 51.149C41.7145 51.8936 42.5852 52.7679 43.4617 53.7421L52.2121 50.5573L52.9313 52.3374L43.79 55.6646L44.6651 57.8305L52.4833 54.9849L53.1666 56.6761L45.3484 59.5217L46.1875 61.5986L54.0659 58.7311L54.7491 60.4223L46.8708 63.2898L47.7698 65.515L57.3923 62.0127L58.1235 63.8226L35.9919 71.8779L32.5035 63.2439ZM45.6348 66.2921L44.7358 64.0669L36.4364 67.0876L37.3355 69.3128L45.6348 66.2921ZM44.0525 62.3757L43.2134 60.2988L34.914 63.3195L35.7531 65.3964L44.0525 62.3757ZM42.5301 58.6076L41.655 56.4417L33.5661 59.3858C33.5239 59.5373 33.4997 59.6482 33.4875 59.7888L34.2307 61.6283L42.5301 58.6076ZM56.4839 47.471L62.7084 45.2054L62.121 43.7516L64.2259 42.9855L64.8133 44.4393L69.8952 42.5897L70.5185 44.1325L65.4367 45.9821L66.0001 47.3766L70.27 45.8225L70.8454 47.2466L59.6593 51.318L59.0839 49.8939L63.8951 48.1427L63.3317 46.7483L57.1072 49.0138L56.4839 47.471ZM65.8022 52.0091L62.7651 53.1145L63.0168 53.7375C63.1607 54.0936 63.2864 54.4902 63.3701 54.8682L66.4974 53.7299L65.8022 52.0091ZM68.1212 53.1389L70.7674 52.1758L70.0721 50.4549L67.426 51.4181L68.1212 53.1389ZM63.615 56.2425C63.7454 57.7605 63.5032 59.21 62.8703 60.6315L60.9416 59.8701C61.7612 58.1424 61.8294 56.3478 61.0923 54.438L60.3131 52.5095L71.379 48.4818L73.1171 52.784L63.615 56.2425ZM71.9233 40.6944L79.1401 38.0676L80.0991 40.4412C80.2669 40.8566 80.5433 41.0283 80.9342 40.886L83.1894 40.0652L83.8128 41.608L81.1065 42.593C79.9037 43.0308 79.0505 42.6266 78.559 41.4102L78.0795 40.2234L74.2306 41.6243C74.5542 42.4254 74.6495 43.1735 74.5766 43.8466C74.4254 44.5823 74.0097 45.3462 73.3114 46.1789L71.635 45.5299C72.189 44.6816 72.4844 43.9615 72.5694 43.318C72.5942 42.6964 72.3788 41.8218 71.9233 40.6944ZM83.3605 42.7936L83.84 43.9804C83.6458 45.5486 82.9887 47.081 81.8387 48.5886C83.4017 48.5302 85.2234 48.3436 87.3038 48.0288L87.0971 49.9078C84.4457 50.2603 82.2093 50.3595 80.358 50.2166C79.0219 51.5197 77.3552 52.7729 75.358 53.9763L73.9227 52.729C75.6071 51.7756 77.0149 50.8208 78.1882 49.8832C76.5055 49.4747 75.1958 48.7942 74.2712 47.8716L73.0984 48.2984L72.4751 46.7556L83.3605 42.7936ZM75.925 47.2696C76.6817 47.9471 77.9255 48.3793 79.6446 48.5363C80.7641 47.3802 81.5169 46.2553 81.8789 45.1026L75.925 47.2696ZM68.9973 59.4905C68.6716 60.3918 68.2738 61.2853 67.8219 62.1304L65.6343 61.6674C66.8993 59.5054 67.5631 57.392 67.6858 55.3053L69.8683 54.9874C69.8194 55.7199 69.7283 56.4337 69.6134 57.0882L83.8967 51.8895L84.6639 53.7883L77.0862 56.5464L78.177 59.2463L89.6338 55.0764L90.401 56.9753L78.9442 61.1452L80.3468 64.6166L87.2328 62.1103L86.2619 59.707L88.3668 58.9409L90.5605 64.3705L88.4556 65.1366L87.988 63.9795L71.9907 69.802L72.4582 70.9591L70.3533 71.7253L68.1836 66.355L70.2885 65.5889L71.2355 67.9328L78.2118 65.3937L76.8093 61.9223L64.4204 66.4315L63.6532 64.5326L76.0421 60.0234L74.9512 57.3235L68.9973 59.4905Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_36">
|
||||
<rect width="120" height="120" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="121" height="120" viewBox="0 0 121 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2_35)">
|
||||
<circle cx="60.2939" cy="60" r="58.5" stroke="white" stroke-width="3"/>
|
||||
<circle cx="60.2938" cy="60" r="51.1997" stroke="white" stroke-width="2" stroke-dasharray="2 2"/>
|
||||
<line x1="19.8277" y1="50.637" x2="82.4435" y2="27.8676" stroke="white"/>
|
||||
<line x1="36.7388" y1="93.3029" x2="99.3547" y2="70.5335" stroke="white"/>
|
||||
<path d="M26.044 58.3135L28.1301 57.5543L29.6698 61.365L39.3392 57.8456L40.1259 59.7927L30.4565 63.3121L32.4456 68.2354L43.6092 64.1722L44.3958 66.1193L35.0929 69.5053C38.3977 72.3226 42.9265 74.2477 48.6624 75.3187L47.9721 77.6119C41.831 76.0184 36.9817 73.5399 33.4578 70.1004L33.2323 70.1825L38.3569 82.8664L36.2708 83.6257L31.1462 70.9418L30.8925 71.0341C30.7058 76.3346 28.8006 81.3035 25.1994 85.9962L23.2907 84.5532C26.8122 80.4638 28.8237 76.1582 29.3138 71.6087L19.9826 75.005L19.196 73.0579L30.3595 68.9947L28.3703 64.0714L18.8982 67.5189L18.1116 65.5718L27.5837 62.1243L26.044 58.3135ZM44.9692 53.2121L66.9298 45.2191L67.7165 47.1662L63.0086 48.8797L65.9867 56.2508L72.1605 54.0037L72.936 55.923L66.7622 58.1701L71.7407 70.4923L69.6828 71.2414L64.7042 58.9191L56.5571 61.8844C57.4609 64.8417 57.8806 67.401 57.799 69.6003C57.6718 72.3267 56.6263 74.7811 54.6624 76.9636L52.8662 75.6392C54.6327 73.5285 55.5541 71.2469 55.6021 68.8046C55.5422 66.9758 55.1727 64.9407 54.4992 62.6334L47.9871 65.0036L47.2117 63.0843L53.8365 60.6731C53.6904 60.3115 53.5837 59.9675 53.4714 59.6893L50.8866 53.2917L45.7559 55.1592L44.9692 53.2121ZM52.9727 52.5324L55.5575 58.93C55.6923 59.2638 55.799 59.6079 55.9226 59.9138L63.9288 56.9998L60.9507 49.6287L52.9727 52.5324ZM100.444 51.1754L103.725 59.2975L101.724 60.026L101.173 58.6631L86.2321 64.1012L86.7828 65.4641L84.7812 66.1927L81.4997 58.0705L100.444 51.1754ZM85.5128 62.321L100.454 56.8829L99.1391 53.6285L84.198 59.0666L85.5128 62.321ZM77.3528 47.8066C76.8099 49.3442 76.1488 50.8292 75.3524 52.2996L73.9343 50.5504C75.7985 46.8408 76.7158 43.1887 76.6693 39.6322L78.8 39.3034C78.7989 40.261 78.7583 41.201 78.6614 42.1616L85.6527 39.6169C84.8477 38.8251 84.0595 38.1548 83.2374 37.5607L85.1887 36.4676C85.9881 37.1657 86.8043 37.9853 87.626 38.8987L95.8295 35.9128L96.5038 37.5818L87.9338 40.701L88.7542 42.7315L96.0838 40.0638L96.7244 41.6493L89.3948 44.317L90.1815 46.2641L97.5675 43.5758L98.208 45.1613L90.8221 47.8496L91.6649 49.9358L100.686 46.6524L101.371 48.3491L80.6231 55.9009L77.3528 47.8066ZM89.6634 50.6643L88.8205 48.5781L81.0399 51.41L81.8827 53.4962L89.6634 50.6643ZM88.1799 46.9926L87.3933 45.0455L79.6126 47.8774L80.3993 49.8245L88.1799 46.9926ZM86.7527 43.46L85.9323 41.4295L78.349 44.1896C78.3094 44.3317 78.2867 44.4356 78.2753 44.5674L78.972 46.292L86.7527 43.46Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_35">
|
||||
<rect width="120" height="120" fill="white" transform="translate(0.293854)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2_37)">
|
||||
<circle cx="60.706" cy="60.1438" r="58.5" stroke="white" stroke-width="3"/>
|
||||
<circle cx="60.706" cy="60.1438" r="51.1997" stroke="white" stroke-width="2" stroke-dasharray="2 2"/>
|
||||
<line x1="20.2398" y1="50.7807" x2="82.8557" y2="28.0114" stroke="white"/>
|
||||
<line x1="37.151" y1="93.4466" x2="99.7668" y2="70.6773" stroke="white"/>
|
||||
<path d="M41.9891 67.1295L24.2853 73.5732L27.6006 81.7788C28.095 83.0027 29.0019 83.4064 30.2987 82.9344L44.4505 77.7836C45.127 77.5373 45.6234 77.1652 45.9114 76.6775C46.273 75.9717 45.9202 74.0581 44.8531 70.9368L47.0737 70.8305C48.1854 74.3822 48.5377 76.615 48.1534 77.5845C47.7692 78.3943 46.9625 79.0389 45.8009 79.5255L30.5215 85.0867C28.2381 85.9178 26.6385 85.16 25.7169 82.8791L19.8169 68.276L21.8466 67.5372L23.5099 71.6539L39.1557 65.9593L36.2226 58.6994L17.4193 65.5433L16.6326 63.5962L37.4938 56.0033L41.9891 67.1295ZM43.6958 53.746L68.7574 44.6243L69.5553 46.5992L57.3205 51.0523L59.0175 55.2525C63.2099 55.7047 67.5711 56.4146 72.101 57.3821L71.6081 59.6035C66.8697 58.5204 62.9482 57.7781 59.8716 57.3664L66.2549 73.1657L64.1969 73.9147L55.2626 51.8013L44.4937 55.7209L43.6958 53.746ZM86.686 38.737L95.7634 35.4331L99.6406 45.0294L90.5631 48.3333L86.686 38.737ZM96.9649 43.9294L94.5487 37.949L89.3334 39.8473L91.7496 45.8276L96.9649 43.9294ZM75.9761 40.4016L77.9495 39.6834L78.9609 42.1868L84.4581 40.1859C86.3629 44.9805 87.2273 47.9203 87.0456 49.0712C86.8357 50.2324 86.04 51.0644 84.6305 51.5774C84.1795 51.7416 83.6495 51.8707 83.0069 52.0408L81.769 50.4174L83.432 49.9717C84.4357 49.5745 84.9379 48.9769 84.9389 48.1789C84.8947 47.4292 84.3052 45.5699 83.1815 42.6288L79.5167 43.9626C80.5827 48.0415 80.0148 51.5983 77.8133 54.633L75.791 53.8695C77.823 51.2155 78.4015 48.1653 77.5434 44.6809L73.4557 46.1687L72.759 44.4441L76.9876 42.905L75.9761 40.4016ZM77.6697 56.9187L88.8896 52.835L87.9793 50.5819L90.009 49.8431L90.9193 52.0962L102.167 48.0022L102.932 49.8937L93.5441 53.3104C96.3883 54.8277 100.451 55.6783 105.709 55.8065L104.996 58.0441C99.2876 57.4416 94.9159 56.0655 91.8527 53.9261L91.6835 53.9876L95.1337 62.527L93.1039 63.2658L89.6538 54.7264L89.5128 54.7777C88.7079 58.708 86.3138 62.5466 82.3811 66.339L80.4836 64.9239C84.269 61.7275 86.7018 58.5448 87.7932 55.4036L78.4339 58.8101L77.6697 56.9187Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_37">
|
||||
<rect width="120" height="120" fill="white" transform="translate(0.706001 0.143768)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -13,7 +13,8 @@ export const useNavbarStore = defineStore('navbar', {
|
|||
isTransparent: false,
|
||||
height: 0,
|
||||
hasPlaceholder: true,
|
||||
scrollTop: 0 //滚动高度
|
||||
scrollTop: 0 ,//滚动高度
|
||||
screenHeight:375
|
||||
}),
|
||||
actions: {
|
||||
updateNavbarConfig(config) {
|
||||
|
|
@ -23,21 +24,21 @@ export const useNavbarStore = defineStore('navbar', {
|
|||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
const statusBarHeight = res.statusBarHeight;
|
||||
// 总高度
|
||||
this.screenHeight = res.screenHeight
|
||||
let navBarHeight;
|
||||
|
||||
// 微信小程序的特殊处理
|
||||
if (res.platform === 'weapp') {
|
||||
if (res.uniPlatform === 'mp-weixin' || res.uniPlatform === 'mp-alipay') {
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||
const topGap = menuButtonInfo.top - statusBarHeight;
|
||||
const bottomGap = statusBarHeight + menuButtonInfo.height + topGap * 2 - (
|
||||
menuButtonInfo.top + menuButtonInfo.height);
|
||||
navBarHeight = menuButtonInfo.height + topGap + bottomGap;
|
||||
navBarHeight = menuButtonInfo.height + topGap + bottomGap - 4;
|
||||
} else if (uni.getSystemInfoSync().platform === 'ios') {
|
||||
navBarHeight = 44;
|
||||
} else {
|
||||
navBarHeight = 48;
|
||||
}
|
||||
|
||||
this.height = statusBarHeight + navBarHeight;
|
||||
},
|
||||
fail: (err) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
import {
|
||||
computed,
|
||||
watchEffect
|
||||
} from 'vue';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
export const useCartStore = defineStore('cart', () => {
|
||||
// const dinersNum = uni.cache.get('dinersNum')
|
||||
// const isVip = uni.cache.get('orderVIP').isVip //此用户是否是会员
|
||||
// const isMemberPrice = uni.cache.get('ordershopUserInfo').isMemberPrice //此店是否可以用会员
|
||||
// const isTableFee = uni.cache.get('ordershopUserInfo').isTableFee //此店是否免桌位费
|
||||
// const tableFee = uni.cache.get('ordershopUserInfo').tableFee //一个餐位费多钱
|
||||
|
||||
// 计算向上取整
|
||||
const roundUpToTwoDecimals = (num, i) => {
|
||||
// 先将数字乘以 100 并转换为字符串保留足够的小数位
|
||||
let temp = (num * 100).toFixed(10);
|
||||
// 向上取整
|
||||
let rounded = null
|
||||
if (i == 'upward') {
|
||||
rounded = Math.ceil(parseFloat(temp));
|
||||
} else {
|
||||
rounded = Math.floor(parseFloat(temp));
|
||||
}
|
||||
// 再除以 100 得到保留两位小数的结果
|
||||
return rounded / 100;
|
||||
};
|
||||
|
||||
// 精确计算函数
|
||||
const preciseCalculation = (num1, num2) => {
|
||||
// 将数字转换为整数,乘以 100 以保留两位小数
|
||||
const int1 = BigInt(Math.round(num1 * 100));
|
||||
const int2 = BigInt(Math.round(num2 * 100));
|
||||
// 执行乘法运算
|
||||
const result = int1 * int2;
|
||||
// 再除以 10000 以还原为原来的小数
|
||||
return Number(result) / 10000;
|
||||
};
|
||||
|
||||
// 计算购物车商品总价格
|
||||
const getTotalTotalPrices = (matchedProducts, changeFreeenable = true) => computed(() => {
|
||||
if (!matchedProducts || !Array.isArray(matchedProducts)) {
|
||||
return 0;
|
||||
}
|
||||
// console.log(uni.cache.get('orderVIP').isVip, uni.cache.get('ordershopUserInfo').isMemberPrice,
|
||||
// 111)
|
||||
// 购物车总数价格
|
||||
let cart = matchedProducts.reduce((total, item) => {
|
||||
// 是否启用会员价 0否1是
|
||||
if (uni.cache.get('orderVIP').isVip == 1 && uni.cache.get('ordershopUserInfo')
|
||||
.isMemberPrice == 1 && changeFreeenable) {
|
||||
// memberPrice会员价
|
||||
return total + (parseFloat(item.memberPrice || item.price) * parseFloat(item
|
||||
.num - item
|
||||
.returnNum));
|
||||
} else {
|
||||
// salePrice销售价
|
||||
return total + (parseFloat(item.price) * parseFloat(item.num - item.returnNum));
|
||||
}
|
||||
}, 0);
|
||||
|
||||
cart = cart.toFixed(2)
|
||||
console.log(parseFloat(cart))
|
||||
// 向上取整并保留两位小数
|
||||
// let result = roundUpToTwoDecimals(cart, 'upward')
|
||||
return parseFloat(cart);
|
||||
});
|
||||
|
||||
// 计算商品卷所选择的总价格
|
||||
const getTotalProductroll = (matchedProducts) => computed(() => {
|
||||
if (!matchedProducts || !Array.isArray(matchedProducts)) {
|
||||
return 0;
|
||||
}
|
||||
// 购物车总数价格
|
||||
let cart = matchedProducts.reduce((total, item) => {
|
||||
// 是否启用会员价 0否1是
|
||||
if (uni.cache.get('orderVIP').isVip == 1 && uni.cache.get('ordershopUserInfo')
|
||||
.isMemberPrice == 1) {
|
||||
// memberPrice会员价
|
||||
return total + parseFloat(item.memberPrice || item.price)
|
||||
} else {
|
||||
// salePrice销售价
|
||||
return total + parseFloat(item.price)
|
||||
}
|
||||
}, 0);
|
||||
// 向上取整并保留两位小数
|
||||
let result = roundUpToTwoDecimals(cart, 'upward')
|
||||
return result;
|
||||
});
|
||||
|
||||
// 桌位置
|
||||
const getTotalSeatcharge = (seatNum) => computed(() => {
|
||||
// 是否免除桌位费 0 否 1 是
|
||||
let cart = 0
|
||||
|
||||
if (uni.cache.get('ordershopUserInfo').isTableFee == 0 && seatNum) {
|
||||
cart = parseFloat(seatNum) * parseFloat(uni.cache.get('ordershopUserInfo').tableFee)
|
||||
|
||||
// Math.ceil(parseFloat(seatNum) * parseFloat(
|
||||
// uni.cache.get('ordershopUserInfo').tableFee) * 100) / 100;
|
||||
}
|
||||
// 向下取整并保留两位小数
|
||||
let result = roundUpToTwoDecimals(cart, 'downward')
|
||||
return result;
|
||||
});
|
||||
|
||||
// 计算购物车总打包费用(向下取整并保留两位小数)
|
||||
const getTotalPackFee = (cartList) => computed(() => {
|
||||
const total = cartList.reduce((sum, item) => {
|
||||
return sum + (parseFloat(item.packAmount) * (parseFloat(item.packNumber) || (
|
||||
parseFloat(item.num) - parseFloat(item.returnNum))));
|
||||
}, 0);
|
||||
// 向下取整并保留两位小数
|
||||
let result = roundUpToTwoDecimals(total, 'downward')
|
||||
console.log(result)
|
||||
return result;
|
||||
// return Math.floor(total * 100) / 100;
|
||||
});
|
||||
|
||||
return {
|
||||
getTotalPackFee,
|
||||
getTotalSeatcharge,
|
||||
getTotalTotalPrices,
|
||||
getTotalProductroll
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
APIpayltPayOrder,
|
||||
APIpayltPayVip,
|
||||
APIrefundVip
|
||||
} from '@/common/api/pay.js'
|
||||
|
||||
import {
|
||||
APIcreateOrder
|
||||
} from '@/common/api/order/index.js'
|
||||
|
||||
export const Memberpay = defineStore('memberpay', {
|
||||
actions: {
|
||||
//会员充值
|
||||
actionspayltPayVip(data) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let res = await APIpayltPayVip({
|
||||
shopId: data.shopId,
|
||||
shopUserId: data.shopUserId,
|
||||
amount: data.amount,
|
||||
activateId: data.activateId,
|
||||
// #ifdef MP-WEIXIN
|
||||
payType: 'wechatPay',
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
payType: 'aliPay',
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
// #endif
|
||||
returnUrl: data.returnUrl ? data.returnUrl : '',
|
||||
buyerRemark: data.buyerRemark ? data.buyerRemark : '',
|
||||
orderId: data.orderId,
|
||||
userAllPack: data.userAllPack,
|
||||
seatNum:data.seatNum
|
||||
})
|
||||
if (res) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.requestPayment({
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.appId, // 微信支付商户号
|
||||
timeStamp: res.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.nonceStr, // 随机字符串
|
||||
package: res.package, // 固定值
|
||||
signType: res.signType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay', //支付类型-固定值
|
||||
orderInfo: res.tradeNo, // 微信支付商户号
|
||||
// #endif
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
console.log('支付成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
resolve(res)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (res.resultCode == '9000') {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
resolve(res)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "支付失败"
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
fail: (res) => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
reject(false)
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: "支付失败"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//下单支付
|
||||
actionsltPayOrder(data) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let res = await APIpayltPayOrder({
|
||||
shopId: uni.cache.get('shopId'),
|
||||
checkOrderPay: {
|
||||
...data.checkOrderPay,
|
||||
...{
|
||||
userId: uni.cache.get('userInfo').id
|
||||
}
|
||||
},
|
||||
// #ifdef MP-WEIXIN
|
||||
payType: 'wechatPay',
|
||||
openId: uni.cache.get('userInfo').wechatOpenId,
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
payType: 'aliPay',
|
||||
openId: uni.cache.get('alipayOpenId').alipayOpenId,
|
||||
// #endif
|
||||
returnUrl: data.returnUrl,
|
||||
buyerRemark: data.buyerRemark,
|
||||
userId: uni.cache.get('userInfo').id || ''
|
||||
})
|
||||
if (res) {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
uni.requestPayment({
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.appId, // 微信支付商户号
|
||||
timeStamp: res.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.nonceStr, // 随机字符串
|
||||
package: res.package, // 固定值
|
||||
signType: res.signType, //固定值
|
||||
paySign: res.paySign, //签名
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay', //支付类型-固定值
|
||||
orderInfo: res.tradeNo, // 微信支付商户号
|
||||
// #endif
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
console.log('支付成功')
|
||||
resolve(res)
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
if (res.resultCode == '9000') {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
resolve(res)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "支付失败"
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
fail: (res) => {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
reject(false)
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: "支付失败"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//会员支付
|
||||
balancePayOrder(data) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let res = await APIrefundVip({
|
||||
shopId: uni.cache.get('shopId'),
|
||||
checkOrderPay: {
|
||||
...data.checkOrderPay,
|
||||
...{
|
||||
userId: uni.cache.get('userInfo').id
|
||||
}
|
||||
},
|
||||
pwd: data.pwd,
|
||||
payType: data.payType,
|
||||
returnUrl: data.returnUrl,
|
||||
buyerRemark: data.buyerRemark,
|
||||
shopUserId: data.shopUserId,
|
||||
userId: uni.cache.get('userInfo').id || '' //
|
||||
})
|
||||
resolve(true)
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: "支付失败"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 生成订单
|
||||
actionscreateOrder(data) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let res = await APIcreateOrder({
|
||||
orderId: data.orderId, //多次下单时使用
|
||||
shopId: uni.cache.get('shopId'), //店铺Id
|
||||
userId: uni.cache.get('userInfo').id || '', //
|
||||
seatNum: data.seatNum, //用餐人数
|
||||
packFee: data.packFee, //打包费
|
||||
originAmount: data.originAmount, //订单原金额(包含打包费) 不含折扣价格 不含餐位费
|
||||
tableCode: uni.cache.get('tableCode'), //台桌编码
|
||||
dineMode: 'dine-in', //堂食 dine-in 外带 take-out 外卖 take-away
|
||||
remark: data.remark, //备注
|
||||
placeNum: data.placeNum, //当前订单下单次数
|
||||
waitCall: data.waitCall //是否等叫 0 否 1 等叫
|
||||
})
|
||||
if (res) {
|
||||
resolve(res)
|
||||
} else {
|
||||
reject(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
APIcustomlogin
|
||||
} from '@/common/api/api.js'
|
||||
|
||||
export const Storelogin = defineStore('login', {
|
||||
state: () => ({
|
||||
token: '',
|
||||
miniAppOpenId: '',
|
||||
userInfo: ''
|
||||
}),
|
||||
actions: {
|
||||
actionslogin() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (data) => {
|
||||
// 微信小程序环境
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
let res = await APIcustomlogin({
|
||||
code: data.code, //临时登录凭证
|
||||
rawData: infoRes.rawData,
|
||||
source: 'wechat'
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.token = res.data.token
|
||||
this.miniAppOpenId = res.data.userInfo
|
||||
.miniAppOpenId
|
||||
this.userInfo = res.data.userInfo
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data
|
||||
.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data
|
||||
.userInfo);
|
||||
}
|
||||
resolve(true);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_base',
|
||||
success: async (data) => {
|
||||
console.log(data)
|
||||
// 支付宝小程序环境
|
||||
// my.getAuthUserInfo({
|
||||
// success: async (infoRes) => {
|
||||
let res = await APIcustomlogin({
|
||||
code: data.authCode, //临时登录凭证
|
||||
// rawData: JSON.stringify(infoRes),
|
||||
source: 'alipay'
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.token = res.data.token
|
||||
this.miniAppOpenId = res.data.userInfo.miniAppOpenId
|
||||
this.userInfo = res.data.userInfo
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
resolve(true);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}).catch((e) => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
APIuserlogin,
|
||||
APIuser
|
||||
} from '@/common/api/api.js'
|
||||
import {
|
||||
APIproductqueryShop,
|
||||
APIshopUserInfo
|
||||
} from '@/common/api/member.js'
|
||||
export const Storelogin = defineStore('login', {
|
||||
state: () => ({
|
||||
token: '',
|
||||
miniAppOpenId: '',
|
||||
userInfo: ''
|
||||
}),
|
||||
actions: {
|
||||
actionslogin() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (data) => {
|
||||
// 微信小程序环境
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
let res = await APIuserlogin({
|
||||
code: data.code, //临时登录凭证
|
||||
rawData: infoRes.rawData,
|
||||
source: 'wechat'
|
||||
})
|
||||
if (res) {
|
||||
this.token = res.token
|
||||
this.miniAppOpenId = res.userInfo
|
||||
.miniAppOpenId
|
||||
this.userInfo = res.userInfo
|
||||
uni.cache.set('token', res.token);
|
||||
uni.cache.set('userInfo', res.userInfo);
|
||||
}
|
||||
resolve(true);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.getAuthCode({
|
||||
scopes: 'auth_base',
|
||||
success: async (data) => {
|
||||
// 支付宝小程序环境
|
||||
// my.getAuthUserInfo({
|
||||
// success: async (infoRes) => {
|
||||
let res = await APIuserlogin({
|
||||
code: data.authCode, //临时登录凭证
|
||||
// rawData: JSON.stringify(infoRes),
|
||||
source: 'alipay'
|
||||
})
|
||||
if (res) {
|
||||
this.token = res.token
|
||||
this.miniAppOpenId = res.userInfo.miniAppOpenId
|
||||
this.userInfo = res.userInfo
|
||||
uni.cache.set('token', res.token);
|
||||
uni.cache.set('openId', res.userInfo
|
||||
.alipayOpenId)
|
||||
uni.cache.set('userInfo', res.userInfo);
|
||||
resolve(true);
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
reject(false);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const productStore = defineStore('product', {
|
||||
actions: {
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// 扫码请求
|
||||
scanCodeactions(q) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if (q) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let tableCode = this.getQueryString(decodeURIComponent(q), 'code')
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
let tableCode = q
|
||||
// #endif
|
||||
|
||||
// 储存卓玛
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
let data = await this.actionsproductqueryShop()
|
||||
// -4请求登录
|
||||
const store = Storelogin()
|
||||
if (data.code == '500') {
|
||||
if (await store.actionslogin()) {
|
||||
// 成功 接着在调用
|
||||
await this.actionsproductqueryShop()
|
||||
}
|
||||
}
|
||||
// 是否免除桌位费 0否1是
|
||||
if (uni.cache.get('shopInfo').isTableFee == 0) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/product/choosetable'
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/product/index'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
// #ifdef APP || MP-WEIXIN || MP-ALIPAY
|
||||
uni.scanCode({
|
||||
success: async (res) => {
|
||||
let tableCode = this.getQueryString(
|
||||
decodeURIComponent(res.result), 'code')
|
||||
// 储存卓玛
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
let data = await this.actionsproductqueryShop()
|
||||
// -4请求登录
|
||||
const store = Storelogin()
|
||||
if (data.code == '-4') {
|
||||
if (await store.actionslogin()) {
|
||||
// 成功 接着在调用
|
||||
await this.actionsproductqueryShop()
|
||||
}
|
||||
}
|
||||
// 是否免除桌位费 0否1是
|
||||
if (uni.cache.get('shopInfo').isTableFee == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/choosetable'
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/product/index'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
// #ifdef H5
|
||||
if (uni.cache.get('tableCode')) {
|
||||
let data = await this.actionsproductqueryShop()
|
||||
// -4请求登录
|
||||
const store = Storelogin()
|
||||
if (data.code == '-4') {
|
||||
if (await store.actionslogin()) {
|
||||
// 成功 接着在调用
|
||||
await this.actionsproductqueryShop()
|
||||
}
|
||||
}
|
||||
// idle-空闲 using-使用中 subscribe预定,closed--关台, opening 开台中,cleaning 台桌清理中
|
||||
if (uni.cache.get('shopTable').status == 'cleaning' || uni.cache.get(
|
||||
'shopTable').status == 'cleaning') {
|
||||
uni.showToast({
|
||||
title: '此台桌暂不可用...',
|
||||
icon: 'none'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
|
||||
if (uni.cache.get('shopInfo').isTableFee == 0) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/choosetable'
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/product/index'
|
||||
});
|
||||
// uni.pro.navigateTo('product/index', {
|
||||
// tableCode: uni.cache.get('tableCode'),
|
||||
// })
|
||||
}
|
||||
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
|
||||
// /通过桌码获取当前店铺信息
|
||||
actionsproductqueryShop() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// try {
|
||||
let res = await APIproductqueryShop({
|
||||
tableCode: uni.cache.get('tableCode'),
|
||||
})
|
||||
res.shopInfo.isVip = res.vip ? '1' : '0'
|
||||
res.shopTable.shopExtendMap = res.shopExtendMap
|
||||
// 店铺信息
|
||||
uni.cache.set('shopTable', res.shopTable)
|
||||
// 台桌信息
|
||||
uni.cache.set('shopInfo', res.shopInfo)
|
||||
uni.cache.set('shopId', res.shopTable.shopId, 30)
|
||||
// 当前用户距离店铺的米数
|
||||
uni.cache.set('distance', res.distance)
|
||||
|
||||
resolve(res)
|
||||
// } catch (e) {
|
||||
// reject(false)
|
||||
// }
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
// 通过shopId 获取店铺会员信息
|
||||
actionsproductqueryProduct() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let res = await APIshopUserInfo()
|
||||
uni.cache.set('shopUserInfo', res);
|
||||
uni.cache.set('orderVIP', res)
|
||||
uni.cache.set('ordershopUserInfo', res.shopInfo)
|
||||
resolve(true)
|
||||
} catch (e) {
|
||||
reject(false)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
// 用户信息获取
|
||||
actionsAPIuser() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
// 获取店铺用户会员信息
|
||||
if (uni.cache.get('shopId')) {
|
||||
this.actionsproductqueryProduct()
|
||||
} else {
|
||||
let res = await APIuser()
|
||||
uni.cache.set('userInfo', res);
|
||||
}
|
||||
resolve(true)
|
||||
} catch (e) {
|
||||
reject(false)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
## 1.2.4(2024-09-21)
|
||||
- 新增 支持控制显示位数 默认显示2位
|
||||
## 1.2.3(2024-02-20)
|
||||
- 新增 支持控制小时,分钟的显隐:showHour showMinute
|
||||
## 1.2.2(2022-01-19)
|
||||
- 修复 在微信小程序中样式不生效的bug
|
||||
## 1.2.1(2022-01-18)
|
||||
- 新增 update 方法 ,在动态更新时间后,刷新组件
|
||||
## 1.2.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
## 1.1.3(2021-10-18)
|
||||
- 重构
|
||||
- 新增 font-size 支持自定义字体大小
|
||||
## 1.1.2(2021-08-24)
|
||||
- 新增 支持国际化
|
||||
## 1.1.1(2021-07-30)
|
||||
- 优化 vue3下小程序事件警告的问题
|
||||
## 1.1.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.5(2021-06-18)
|
||||
- 修复 uni-countdown 重复赋值跳两秒的 bug
|
||||
## 1.0.4(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 1.0.3(2021-05-08)
|
||||
- 修复 uni-countdown 不能控制倒计时的 bug
|
||||
## 1.0.2(2021-02-04)
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "day",
|
||||
"uni-countdown.h": "h",
|
||||
"uni-countdown.m": "m",
|
||||
"uni-countdown.s": "s"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "时",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "時",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<view class="uni-countdown">
|
||||
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
|
||||
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
|
||||
<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
|
||||
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
|
||||
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
|
||||
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
|
||||
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
|
||||
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* Countdown 倒计时
|
||||
* @description 倒计时组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=25
|
||||
* @property {String} backgroundColor 背景色
|
||||
* @property {String} color 文字颜色
|
||||
* @property {Number} day 天数
|
||||
* @property {Number} hour 小时
|
||||
* @property {Number} minute 分钟
|
||||
* @property {Number} second 秒
|
||||
* @property {Number} timestamp 时间戳
|
||||
* @property {Boolean} showDay = [true|false] 是否显示天数
|
||||
* @property {Boolean} showHour = [true|false] 是否显示小时
|
||||
* @property {Boolean} showMinute = [true|false] 是否显示分钟
|
||||
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
|
||||
* @property {String} splitorColor 分割符号颜色
|
||||
* @event {Function} timeup 倒计时时间到触发事件
|
||||
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
|
||||
*/
|
||||
export default {
|
||||
name: 'UniCountdown',
|
||||
emits: ['timeup'],
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHour: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMinute: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
start: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
day: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
filterShow : {
|
||||
type:Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
syncFlag: false,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dayText() {
|
||||
return t("uni-countdown.day")
|
||||
},
|
||||
hourText(val) {
|
||||
return t("uni-countdown.h")
|
||||
},
|
||||
minuteText(val) {
|
||||
return t("uni-countdown.m")
|
||||
},
|
||||
secondText(val) {
|
||||
return t("uni-countdown.s")
|
||||
},
|
||||
timeStyle() {
|
||||
const {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize
|
||||
} = this
|
||||
return {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize: `${fontSize}px`,
|
||||
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
|
||||
lineHeight: `${fontSize * 20 / 14}px`,
|
||||
borderRadius: `${fontSize * 3 / 14}px`,
|
||||
}
|
||||
},
|
||||
splitorStyle() {
|
||||
const { splitorColor, fontSize, backgroundColor } = this
|
||||
return {
|
||||
color: splitorColor,
|
||||
fontSize: `${fontSize * 12 / 14}px`,
|
||||
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
day(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
hour(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
minute(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
second(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
start: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.startData();
|
||||
} else {
|
||||
if (!oldVal) return
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.countDown()
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
toSeconds(timestamp, day, hours, minutes, seconds) {
|
||||
if (timestamp) {
|
||||
return timestamp - parseInt(new Date().getTime() / 1000, 10)
|
||||
}
|
||||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup')
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24))
|
||||
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||
} else {
|
||||
this.timeUp()
|
||||
}
|
||||
this.d = String(day).padStart(this.validFilterShow(this.filterShow.d), '0')
|
||||
this.h = String(hour).padStart(this.validFilterShow(this.filterShow.h), '0')
|
||||
this.i = String(minute).padStart(this.validFilterShow(this.filterShow.m), '0')
|
||||
this.s = String(second).padStart(this.validFilterShow(this.filterShow.s), '0')
|
||||
},
|
||||
validFilterShow(filter){
|
||||
return (filter && filter > 0) ? filter : 2;
|
||||
},
|
||||
startData() {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
if (this.seconds <= 0) {
|
||||
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
|
||||
this.countDown()
|
||||
return
|
||||
}
|
||||
clearInterval(this.timer)
|
||||
this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
update(){
|
||||
this.startData();
|
||||
},
|
||||
changeFlag() {
|
||||
if (!this.syncFlag) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.startData();
|
||||
this.syncFlag = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$font-size: 14px;
|
||||
|
||||
.uni-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&__splitor {
|
||||
margin: 0 2px;
|
||||
font-size: $font-size;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__number {
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
{
|
||||
"id": "uni-countdown",
|
||||
"displayName": "uni-countdown 倒计时",
|
||||
"version": "1.2.4",
|
||||
"description": "CountDown 倒计时组件",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"countdown",
|
||||
"倒计时"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
|
||||
## CountDown 倒计时
|
||||
> **组件名:uni-countdown**
|
||||
> 代码块: `uCountDown`
|
||||
|
||||
倒计时组件。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
## 1.0.3(2022-01-21)
|
||||
- 优化 组件示例
|
||||
## 1.0.2(2021-11-22)
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1(2021-11-22)
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0(2021-11-18)
|
||||
- init
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './styles/index.scss';
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
// @use "sass:math";
|
||||
@import '../tools/functions.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2 !default;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px !default;
|
||||
$uni-radius: () !default;
|
||||
// 边框半径断点
|
||||
$uni-radius: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
// TODO 当前版本暂时不支持 sm 属性
|
||||
// 'sm': math.div($uni-radius-root, 2),
|
||||
null: $uni-radius-root,
|
||||
'lg': $uni-radius-root * 2,
|
||||
'xl': $uni-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%
|
||||
),
|
||||
$uni-radius
|
||||
);
|
||||
// 字体家族
|
||||
$body-font-family: 'Roboto', sans-serif !default;
|
||||
// 文本
|
||||
$heading-font-family: $body-font-family !default;
|
||||
$uni-headings: () !default;
|
||||
$letterSpacing: -0.01562em;
|
||||
$uni-headings: map-deep-merge(
|
||||
(
|
||||
'h1': (
|
||||
size: 32px,
|
||||
weight: 300,
|
||||
line-height: 50px,
|
||||
// letter-spacing:-0.01562em
|
||||
),
|
||||
'h2': (
|
||||
size: 28px,
|
||||
weight: 300,
|
||||
line-height: 40px,
|
||||
// letter-spacing: -0.00833em
|
||||
),
|
||||
'h3': (
|
||||
size: 24px,
|
||||
weight: 400,
|
||||
line-height: 32px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h4': (
|
||||
size: 20px,
|
||||
weight: 400,
|
||||
line-height: 30px,
|
||||
// letter-spacing: 0.00735em
|
||||
),
|
||||
'h5': (
|
||||
size: 16px,
|
||||
weight: 400,
|
||||
line-height: 24px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h6': (
|
||||
size: 14px,
|
||||
weight: 500,
|
||||
line-height: 18px,
|
||||
// letter-spacing: 0.0125em
|
||||
),
|
||||
'subtitle': (
|
||||
size: 12px,
|
||||
weight: 400,
|
||||
line-height: 20px,
|
||||
// letter-spacing: 0.00937em
|
||||
),
|
||||
'body': (
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 22px,
|
||||
// letter-spacing: 0.03125em
|
||||
),
|
||||
'caption': (
|
||||
'size': 12px,
|
||||
'weight': 400,
|
||||
'line-height': 20px,
|
||||
// 'letter-spacing': 0.03333em,
|
||||
// 'text-transform': false
|
||||
)
|
||||
),
|
||||
$uni-headings
|
||||
);
|
||||
|
||||
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||
$uni-success-light: lighten($uni-success,25%) !default;
|
||||
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||
$uni-error-light: lighten($uni-error,25%) !default;
|
||||
|
||||
$uni-info: #8f939c !default;
|
||||
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||
$uni-info-light: lighten($uni-info,25%) !default;
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||
$uni-secondary-color: #909399 !default; // 次要文字
|
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0 !default;
|
||||
$uni-border-2: #EDEDED !default;
|
||||
$uni-border-3: #DCDCDC !default;
|
||||
$uni-border-4: #B9B9B9 !default;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000 !default;
|
||||
$uni-white: #ffffff !default;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7 !default;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px !default;
|
||||
$uni-spacing-base: 15px !default;
|
||||
$uni-spacing-lg: 30px !default;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// 合并 map
|
||||
@function map-deep-merge($parent-map, $child-map){
|
||||
$result: $parent-map;
|
||||
@each $key, $child in $child-map {
|
||||
$parent-has-key: map-has-key($result, $key);
|
||||
$parent-value: map-get($result, $key);
|
||||
$parent-type: type-of($parent-value);
|
||||
$child-type: type-of($child);
|
||||
$parent-is-map: $parent-type == map;
|
||||
$child-is-map: $child-type == map;
|
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||
$result: map-merge($result, ( $key: $child ));
|
||||
}@else {
|
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
// 辅助色
|
||||
$uni-success: #4cd964;
|
||||
// 警告色
|
||||
$uni-warning: #f0ad4e;
|
||||
// 错误色
|
||||
$uni-error: #dd524d;
|
||||
// 描述色
|
||||
$uni-info: #909399;
|
||||
// 中性色
|
||||
$uni-main-color: #303133;
|
||||
$uni-base-color: #606266;
|
||||
$uni-secondary-color: #909399;
|
||||
$uni-extra-color: #C0C4CC;
|
||||
// 背景色
|
||||
$uni-bg-color: #f5f5f5;
|
||||
// 边框颜色
|
||||
$uni-border-1: #DCDFE6;
|
||||
$uni-border-2: #E4E7ED;
|
||||
$uni-border-3: #EBEEF5;
|
||||
$uni-border-4: #F2F6FC;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
@import './styles/setting/_variables.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||
$uni-success: #18bc37;
|
||||
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||
|
||||
$uni-warning: #f3a73f;
|
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||
|
||||
$uni-error: #e43d33;
|
||||
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||
|
||||
$uni-info: #8f939c;
|
||||
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||
$uni-main-color: #3a3a3a; // 主要文字
|
||||
$uni-base-color: #6a6a6a; // 常规文字
|
||||
$uni-secondary-color: #909399; // 次要文字
|
||||
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0;
|
||||
$uni-border-2: #EDEDED;
|
||||
$uni-border-3: #DCDCDC;
|
||||
$uni-border-4: #B9B9B9;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px;
|
||||
$uni-spacing-base: 15px;
|
||||
$uni-spacing-lg: 30px;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
|
|
@ -9,7 +9,7 @@ export default defineConfig({
|
|||
hmr: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://cashier.sxczgkj.cn',
|
||||
target: 'https://tapi.cashier.sxczgkj.cn',
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/api/, ''),
|
||||
secure: false
|
||||
|
|
|
|||
Loading…
Reference in New Issue