Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8b68595e92 | ||
|
|
7a8617b7a7 | ||
|
|
45f8f23fcc | ||
|
|
6040e37da2 | ||
|
|
b30b8ffc30 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,2 +1 @@
|
||||
/unpackage
|
||||
node_modules/
|
||||
/unpackage
|
||||
@@ -1,27 +1,16 @@
|
||||
{
|
||||
// launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||
"version" : "0.0",
|
||||
"configurations" : [
|
||||
{
|
||||
"app-plus" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"default" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
},
|
||||
{
|
||||
"playground" : "custom",
|
||||
"type" : "uni-app:app-android"
|
||||
},
|
||||
{
|
||||
"playground" : "standard",
|
||||
"type" : "uni-app:app-ios"
|
||||
}
|
||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
24
App.vue
24
App.vue
@@ -1,29 +1,15 @@
|
||||
<template>
|
||||
<button v-show="false" open-type="getPhoneNumber" @getphonenumber="userlogin"> </button>
|
||||
</template>
|
||||
<script>
|
||||
import useStorage from '@/utils/useStroage.js';
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.cache.set('menuInfo', uni.getMenuButtonBoundingClientRect());
|
||||
// #endif
|
||||
uni.cache.set('NAME', '零点八零');
|
||||
this.userlogin()
|
||||
// console.log('App Launch');
|
||||
useStorage.set('menuInfo', uni.getMenuButtonBoundingClientRect());
|
||||
},
|
||||
onLoad() {},
|
||||
onShow: function() {
|
||||
this.$store.dispatch("HeightActions"); //获取随时获取页面的高度
|
||||
|
||||
// console.log('App Show');
|
||||
},
|
||||
onHide: function() {
|
||||
// console.log('App Hide');
|
||||
},
|
||||
methods: {
|
||||
userlogin() {
|
||||
if (!uni.cache.get('token')) {
|
||||
this.$store.dispatch("loginEvent"); //获取shapid
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -84,7 +70,7 @@
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #F9F9F9;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
text {
|
||||
|
||||
35
common/js/WXBizDataCrypt.js
Normal file
35
common/js/WXBizDataCrypt.js
Normal file
@@ -0,0 +1,35 @@
|
||||
var crypto = require('crypto')
|
||||
|
||||
function WXBizDataCrypt(appId, sessionKey) {
|
||||
this.appId = appId
|
||||
this.sessionKey = sessionKey
|
||||
}
|
||||
|
||||
WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
|
||||
// base64 decode
|
||||
var sessionKey = new Buffer(this.sessionKey, 'base64')
|
||||
encryptedData = new Buffer(encryptedData, 'base64')
|
||||
iv = new Buffer(iv, 'base64')
|
||||
|
||||
try {
|
||||
// 解密
|
||||
var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
|
||||
// 设置自动 padding 为 true,删除填充补位
|
||||
decipher.setAutoPadding(true)
|
||||
var decoded = decipher.update(encryptedData, 'binary', 'utf8')
|
||||
decoded += decipher.final('utf8')
|
||||
|
||||
decoded = JSON.parse(decoded)
|
||||
|
||||
} catch (err) {
|
||||
throw new Error('Illegal Buffer')
|
||||
}
|
||||
|
||||
if (decoded.watermark.appid !== this.appId) {
|
||||
throw new Error('Illegal Buffer')
|
||||
}
|
||||
|
||||
return decoded
|
||||
}
|
||||
|
||||
module.exports = WXBizDataCrypt
|
||||
149
common/js/api.js
149
common/js/api.js
@@ -2,26 +2,8 @@ export default {
|
||||
userwxlogin(data) { //登录
|
||||
return uni.api.post("/login/wx/custom/login", data);
|
||||
},
|
||||
userwxlogins(data) { // 获取手机号
|
||||
return uni.api.post("/login/getPhoneNumber", data);
|
||||
},
|
||||
loginapplogin(data) { //APP登录(登录即注册)
|
||||
return uni.api.post("/login/app/login", data);
|
||||
},
|
||||
productqueryProduct(data) { //获取商品信息
|
||||
return uni.api.post("/product/queryProduct", data, false);
|
||||
},
|
||||
// 下单详情
|
||||
getproductorderConfirm(data) {
|
||||
return uni.api.get("/product/orderConfirm", data);
|
||||
},
|
||||
// 会员支付
|
||||
accountPay(data) {
|
||||
return uni.api.get("/pay/accountPay", data);
|
||||
},
|
||||
// 下单
|
||||
creatGroupOrder(data) {
|
||||
return uni.api.post("/groupOrderInfo/creatGroupOrder", data);
|
||||
return uni.api.post("/product/queryProduct", data);
|
||||
},
|
||||
cartadd(data) { //添加到购物车
|
||||
return uni.api.post("/cart/add", data);
|
||||
@@ -47,145 +29,22 @@ export default {
|
||||
orderorderList(data) { //订单列表
|
||||
return uni.api.get("/order/orderList", data);
|
||||
},
|
||||
// 团购订单列表
|
||||
groupOrderInfo(data) { //订单列表
|
||||
return uni.api.get("/groupOrderInfo/list", data);
|
||||
},
|
||||
orderorderInfo(data) { //订单回显
|
||||
return uni.api.get("/order/orderInfo", data);
|
||||
},
|
||||
groupOrderInfoDetail(data) { //订单回显
|
||||
return uni.api.get("/groupOrderInfo/get", data);
|
||||
},
|
||||
loginwxuserInfo(data) { //用户详情
|
||||
return uni.api.get("/login/userInfo", data);
|
||||
loginwxuserInfo(data) { //微信用户详情
|
||||
return uni.api.get("/login/wx/userInfo", data);
|
||||
},
|
||||
paymemeberIn(data) { //充值
|
||||
return uni.api.post("/pay/memeberIn", data);
|
||||
},
|
||||
// 支付
|
||||
payOrderPay(data) {
|
||||
return uni.api.post("/pay/groupOrderPay", data);
|
||||
},
|
||||
paymodfiyOrderInfo(data) { //查询订单支付状态
|
||||
return uni.api.post("/pay/modfiyOrderInfo", data);
|
||||
},
|
||||
// 获取余额
|
||||
shopUserInfo(data) {
|
||||
return uni.api.get("/user/shopUserInfo", data);
|
||||
},
|
||||
// 优惠券数量
|
||||
userCoupon(data) {
|
||||
return uni.api.get("/user/userCoupon", data);
|
||||
},
|
||||
// 优惠加倍
|
||||
yhqDouble(data) { //查询订单支付状态
|
||||
return uni.api.post("/order/yhqDouble", data);
|
||||
},
|
||||
// 优惠卷详情
|
||||
getYhqDouble(data) { //通过选中的商品规格查询价格
|
||||
return uni.api.get("/order/getYhqDouble", data);
|
||||
},
|
||||
productqueryProductSku(data) { //通过选中的商品规格查询价格
|
||||
return uni.api.get("/product/queryProductSku", data, false);
|
||||
return uni.api.get("/product/queryProductSku", data);
|
||||
},
|
||||
logingetPhoneNumber(data) { //小程序获取手机号
|
||||
return uni.api.post("/login/getPhoneNumber", data);
|
||||
},
|
||||
cashierServiceloginregister(data) { //用户注册
|
||||
return uni.api.post("/cashierService/login/register", data);
|
||||
},
|
||||
cashierServiceloginregister(data) { //APP登录
|
||||
return uni.api.post("/login/app/login", data);
|
||||
},
|
||||
phoneValidateCode(data) { //验证码
|
||||
return uni.api.get("/phoneValidateCode", data);
|
||||
},
|
||||
homehomePageUp(data) { //首页上半部分
|
||||
return uni.api.post("/home/homePageUp", data);
|
||||
},
|
||||
home(data) { //首页上半部分
|
||||
return uni.api.post("/home", data, false);
|
||||
},
|
||||
locationdistrict(data) { //获取行政区域(区,街道)
|
||||
return uni.api.get("/location/district", data);
|
||||
},
|
||||
queryMemberAccount(data) { //获取行政区域(区,街道)
|
||||
return uni.api.get("/pay/queryMemberAccount", data);
|
||||
},
|
||||
ordermineCoupons(data) { //我的优惠券
|
||||
return uni.api.get("/order/mineCoupons", data, false);
|
||||
},
|
||||
ordergetYhqPara(data) { //获取优惠券参数列表
|
||||
return uni.api.get("/order/getYhqPara", data);
|
||||
},
|
||||
orderfindCoupons(data) { //系统优惠券
|
||||
return uni.api.get("/order/findCoupons", data);
|
||||
},
|
||||
tbPlatformDict(data) { //获取菜单
|
||||
return uni.api.get("/tbPlatformDict", data);
|
||||
},
|
||||
distirictsubShopList(data) { //预约到店(店铺列表)
|
||||
return uni.api.get("/distirict/subShopList", data);
|
||||
},
|
||||
distiricttopCommon(data) { //获取top部分(店铺列表)
|
||||
return uni.api.get("/distirict/topCommon", data);
|
||||
},
|
||||
orderfindWiningUser(data) { //获取免单订单
|
||||
return uni.api.get("/order/findWiningUser", data);
|
||||
},
|
||||
// 获取自己的免单订单
|
||||
ordermineWinner(data) {
|
||||
return uni.api.get("/order/mineWinner", data);
|
||||
},
|
||||
indexlist(data) { //商品列表(今日上新/热榜/咖啡饮品)
|
||||
return uni.api.get("/distirict/productCate", data, false);
|
||||
},
|
||||
productproductInfo(data) { //商品详情
|
||||
return uni.api.get("/product/productInfo", data);
|
||||
},
|
||||
distirictcomShopList(data) { //通用门店列表
|
||||
return uni.api.get("/distirict/comShopList", data);
|
||||
},
|
||||
loginOut(data) { //退出登录
|
||||
return uni.api.post("/login/loginOut", data);
|
||||
},
|
||||
productqueryShopIdByTableCode(data) { //通过桌码获取shopId
|
||||
return uni.api.get("/product/queryShopIdByTableCode", data);
|
||||
},
|
||||
geocodelocation(data) { //根据经纬度获取信息
|
||||
return uni.api.get("/location/geocode", data);
|
||||
},
|
||||
// 修改头像和昵称
|
||||
upUserInfo(data) {
|
||||
return uni.api.post("/login/upUserInfo", data);
|
||||
},
|
||||
loginresetPwd(data) { // 重置资金密码
|
||||
return uni.api.post("/login/resetPwd", data);
|
||||
},
|
||||
paygetActive(data) { // 获取充值活动
|
||||
return uni.api.get("/pay/getActive", data);
|
||||
},
|
||||
paygetShopByMember(data) { // 获取会员店铺信息
|
||||
return uni.api.get("/pay/getShopByMember", data, false);
|
||||
},
|
||||
loginmpdifyPwd(data) { // 修改资金密码
|
||||
return uni.api.get("/login/mpdifyPwd", data);
|
||||
},
|
||||
cashierServicesong(data) { // 获取所有歌曲,支持搜索及分页
|
||||
return uni.api.get("/song", data, false);
|
||||
},
|
||||
cashierServicerecord(data) { // 点歌记录
|
||||
return uni.api.get("/song/record", data);
|
||||
},
|
||||
cashierServicesongpost(data) { // 点歌
|
||||
return uni.api.post("/song", data);
|
||||
},
|
||||
businessopenId(data) { // 获取openId
|
||||
return uni.api.get("/login/wx/business/openId", data);
|
||||
},
|
||||
songsinging(data) { // 获取正在演唱的歌曲
|
||||
return uni.api.get("/song/singing", data, false);
|
||||
},
|
||||
|
||||
}
|
||||
15879
common/js/city.json
15879
common/js/city.json
File diff suppressed because it is too large
Load Diff
74
common/js/lange.js
Normal file
74
common/js/lange.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const env = {
|
||||
aliyunServerURL: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com',
|
||||
accessid: 'LTAI5tMLHwnM1zYYAFuRa1fK',
|
||||
AccessKeySecret: 'jS1h2STq1vcODczDNFQkjcU6ODyYAj',
|
||||
timeout: 100000
|
||||
}
|
||||
|
||||
const Base64 = require('./Base64.js');
|
||||
|
||||
require('./hmac.js');
|
||||
require('./sha1.js');
|
||||
const Crypto = require('./crypto.js');
|
||||
|
||||
|
||||
const uploadFile = function(filePath, key = new Date().getTime()) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// const aliyunFileKey = `${new Date().getTime()}_${userId}`;
|
||||
const aliyunServerURL = env.aliyunServerURL;
|
||||
const accessid = env.accessid;
|
||||
const policyBase64 = getPolicyBase64();
|
||||
const signature = getSignature(policyBase64);
|
||||
|
||||
wx.uploadFile({
|
||||
url: aliyunServerURL, //仅为示例,非真实的接口地址
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
'key': 'headportrait/' + key,
|
||||
'OSSAccessKeyId': accessid,
|
||||
'policy': policyBase64,
|
||||
'Signature': signature,
|
||||
'success_action_status': '200',
|
||||
},
|
||||
success: function(res) {
|
||||
if (res.statusCode != 200) {
|
||||
reject('上传错误:' + JSON.stringify(res))
|
||||
return;
|
||||
}
|
||||
resolve(`https://czh5.sxczgkj.cn/headportrait/${key}`)
|
||||
},
|
||||
fail: function(err) {
|
||||
reject('上传错误:' + JSON.stringify(err))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getPolicyBase64 = function() {
|
||||
let date = new Date();
|
||||
date.setHours(date.getHours() + env.timeout);
|
||||
let srcT = date.toISOString();
|
||||
const policyText = {
|
||||
"expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 指定了Post请求必须发生在2020年01月01日12点之前("2020-01-01T12:00:00.000Z")。
|
||||
"conditions": [
|
||||
["content-length-range", 0, 20 * 1024 * 1024] // 设置上传文件的大小限制,1048576000=1000mb
|
||||
]
|
||||
};
|
||||
|
||||
const policyBase64 = Base64.encode(JSON.stringify(policyText));
|
||||
return policyBase64;
|
||||
}
|
||||
|
||||
const getSignature = function(policyBase64) {
|
||||
const accesskey = env.AccessKeySecret;
|
||||
|
||||
const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
|
||||
asBytes: true
|
||||
});
|
||||
const signature = Crypto.util.bytesToBase64(bytes);
|
||||
|
||||
return signature;
|
||||
}
|
||||
|
||||
module.exports = uploadFile;
|
||||
@@ -1,161 +1,148 @@
|
||||
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) {
|
||||
this.data = data;
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: this.url,
|
||||
success: () => {
|
||||
// console.log('正准备建立websocket中...');
|
||||
// uni.hideLoading();
|
||||
// 返回实例
|
||||
return this.socketTask;
|
||||
},
|
||||
});
|
||||
this.socketTask.onOpen((res) => {
|
||||
uni.hideLoading()
|
||||
this.connectNum = 1;
|
||||
// console.log('WebSocket连接正常!');
|
||||
if (this.params) { //是否初始化请求
|
||||
this.send(this.params);
|
||||
}
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
clearInterval(this.heartbeatInterval);
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = true;
|
||||
this.start();
|
||||
// 注:只有连接正常打开中 ,才能正常收到消息
|
||||
this.socketTask.onMessage((e) => {
|
||||
// 字符串转json
|
||||
let res = JSON.parse(e.data);
|
||||
uni.$emit('message', res)
|
||||
// 普通socket信息处理 TODO
|
||||
});
|
||||
});
|
||||
// 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
|
||||
uni.onSocketError((res) => {
|
||||
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)
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
});
|
||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||||
this.socketTask.onClose(() => {
|
||||
this.socketTask = null;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
|
||||
this.is_open_socket = false;
|
||||
if (this.canReconnect) {
|
||||
this.reconnect();
|
||||
this.canReconnect = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 主动关闭socket连接
|
||||
Close() {
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = false;
|
||||
if (this.socketTask) {
|
||||
this.socketTask.close({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
//发送消息
|
||||
send(data) {
|
||||
// console.log("发送消息---------->", data);
|
||||
// 注:只有连接正常打开中 ,才能正常成功发送消息
|
||||
if (this.socketTask) {
|
||||
this.socketTask.send({
|
||||
data: JSON.stringify(data),
|
||||
async success() {
|
||||
// console.log("消息发送成功");
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
//开启心跳检测
|
||||
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);
|
||||
}
|
||||
}
|
||||
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) {
|
||||
console.log(data,"初始化")
|
||||
this.data = data;
|
||||
// console.log('this.url==', this.url);
|
||||
// console.log('this.params==', this.params);
|
||||
this.socketTask = uni.connectSocket({
|
||||
url: this.url,
|
||||
success: () => {
|
||||
console.log('正准备建立websocket中...');
|
||||
uni.hideLoading();
|
||||
// 返回实例
|
||||
return this.socketTask;
|
||||
},
|
||||
});
|
||||
this.socketTask.onOpen((res) => {
|
||||
this.connectNum = 1;
|
||||
console.log('WebSocket连接正常!');
|
||||
if(this.params){//是否初始化请求
|
||||
this.send(this.params);
|
||||
}
|
||||
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
clearInterval(this.heartbeatInterval);
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = true;
|
||||
this.start();
|
||||
// 注:只有连接正常打开中 ,才能正常收到消息
|
||||
this.socketTask.onMessage((e) => {
|
||||
// 字符串转json
|
||||
let res = JSON.parse(e.data);
|
||||
uni.$emit('message', res)
|
||||
// 普通socket信息处理 TODO
|
||||
|
||||
});
|
||||
});
|
||||
// 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
|
||||
uni.onSocketError((res) => {
|
||||
console.log('网络断开,请检查!');
|
||||
this.socketTask = null;
|
||||
this.is_open_socket = false;
|
||||
this.canReconnect = true;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
if (this.connectNum <= 10) {
|
||||
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;
|
||||
}
|
||||
});
|
||||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||||
this.socketTask.onClose(() => {
|
||||
this.socketTask = null;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearInterval(this.reconnectTimeOut);
|
||||
|
||||
this.is_open_socket = false;
|
||||
if (this.canReconnect) {
|
||||
this.reconnect();
|
||||
this.canReconnect = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 主动关闭socket连接
|
||||
Close () {
|
||||
this.is_open_socket = true;
|
||||
this.canReconnect = false;
|
||||
if(this.socketTask){
|
||||
this.socketTask.close({
|
||||
success(res) {
|
||||
console.log('手动关闭成功');
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
//发送消息
|
||||
send(data) {
|
||||
console.log("发送消息---------->", data);
|
||||
// 注:只有连接正常打开中 ,才能正常成功发送消息
|
||||
if (this.socketTask) {
|
||||
this.socketTask.send({
|
||||
data: JSON.stringify(data),
|
||||
async success() {
|
||||
console.log("消息发送成功");
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
//开启心跳检测
|
||||
start(data) {
|
||||
console.log('开启心跳检测',data)
|
||||
// this.heartbeatInterval = setInterval(() => {
|
||||
// this.send({
|
||||
// data: '心跳检测',
|
||||
// type: 'jc',
|
||||
// });
|
||||
// }, 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = webSocketUtils;
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
||||
<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
<view class="children">
|
||||
<image class="pic" :src="item.logo"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
<swiper-item class="children">
|
||||
<image class="pic" :src="item.logo"></image>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
swiperList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
timersetnteritem: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timersetInterval: null,
|
||||
slideNote: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
screenWidth: 0,
|
||||
itemStyle: [
|
||||
{
|
||||
transform:''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
timersetnteritem(newVal,oldVal) {
|
||||
if (newVal == 1) {
|
||||
clearTimeout(this.timersetInterval);
|
||||
this.timersetInterval = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var macInfo = uni.getSystemInfoSync();
|
||||
this.screenWidth = macInfo.screenWidth;
|
||||
// 计算swiper样式
|
||||
this.swiperList.forEach((item, index) => {
|
||||
this.itemStyle.push(this.getStyle(index))
|
||||
})
|
||||
// this.timersetInterval = setInterval(() => {
|
||||
// this.endMove()
|
||||
// }, 2000);
|
||||
},
|
||||
methods: {
|
||||
getStyle(e) {
|
||||
if (e > this.swiperList.length / 2) {
|
||||
var right = this.swiperList.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
opacity: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
|
||||
zIndex: 9999 - e,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
// if (e > this.swiperList.length / 2) {
|
||||
// var right = this.swiperList.length - e
|
||||
// return {
|
||||
// transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
|
||||
// zIndex: 9999 - right,
|
||||
// opacity: 0.8 / right
|
||||
// }
|
||||
// } else {
|
||||
// return {
|
||||
// transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
|
||||
// zIndex: 9999 - e,
|
||||
// opacity: 0.8 / e
|
||||
// }
|
||||
// }
|
||||
},
|
||||
startMove(e) {
|
||||
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
||||
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
||||
},
|
||||
endMove(e) {
|
||||
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
||||
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
||||
// 向左滑动
|
||||
var last = [newList.pop()]
|
||||
newList = last.concat(newList)
|
||||
// } else {
|
||||
// 向右滑动
|
||||
// newList.push(newList[0])
|
||||
// newList.splice(0, 1)
|
||||
// }
|
||||
this.itemStyle = newList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiperPanel {
|
||||
height: 28rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.swiperItem {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all .5s;
|
||||
|
||||
/* 定义一个动画关键帧 */
|
||||
|
||||
|
||||
.children {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
// margin: 2rpx auto;
|
||||
|
||||
|
||||
/* 应用动画,设置动画时长、循环次数和速度曲线 */
|
||||
.pic {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 10px #333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<u-image :src="src" :radius="radius" :width="width" :height="height" :fade="false" :lazy-load="true" slot="loading"></u-image>
|
||||
<u-image :src="src" :radius="radius" :width="width" :height="height" :fade="false"></u-image>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,192 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-countdown">
|
||||
<text v-if="showDay" class="uni-countdown__number">{{ d }}</text>
|
||||
<text v-if="showDay" class="uni-countdown__splitor">天</text>
|
||||
<text class="uni-countdown__number">{{ h }}</text>
|
||||
<text class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
|
||||
<text class="uni-countdown__number">{{ i }}</text>
|
||||
<text class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
|
||||
<text class="uni-countdown__number">{{ s }}</text>
|
||||
<text v-if="!showColon" class="uni-countdown__splitor">秒</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* 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 {Boolean} showDay = [true|false] 是否显示天数
|
||||
* @property {Boolean} showColon = [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',
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
indexs: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
day: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
syncFlag: false,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
day(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
hour(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
minute(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
second(val) {
|
||||
this.changeFlag()
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
this.startData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
toSeconds(day, hours, minutes, seconds) {
|
||||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
|
||||
},
|
||||
timeUp() {
|
||||
console.log(1)
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup',this.indexs)
|
||||
},
|
||||
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()
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second
|
||||
}
|
||||
this.d = day
|
||||
this.h = hour
|
||||
this.i = minute
|
||||
this.s = second
|
||||
},
|
||||
startData() {
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
|
||||
if (this.seconds <= 0) {
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
changeFlag() {
|
||||
console.log(this.syncFlag,111111)
|
||||
if (!this.syncFlag) {
|
||||
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
|
||||
this.startData();
|
||||
this.syncFlag = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.uni-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.uni-countdown__splitor {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.uni-countdown__number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,267 +0,0 @@
|
||||
<template>
|
||||
<view class='keyboard' @click.stop='_handleKeyPress'>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='7'>7</view>
|
||||
<view class='key-cell cell_b' data-num='8'>8</view>
|
||||
<view class='key-cell cell_b' data-num='9'>9</view>
|
||||
<view class='key-cell cell_b' data-num='-1'></view>
|
||||
</view>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='4'>4</view>
|
||||
<view class='key-cell cell_b' data-num='5'>5</view>
|
||||
<view class='key-cell cell_b' data-num='6'>6</view>
|
||||
<view class='key-cell cell_b' data-num='-1'></view>
|
||||
</view>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='1'>1</view>
|
||||
<view class='key-cell cell_b' data-num='2'>2</view>
|
||||
<view class='key-cell cell_b' data-num='3'>3</view>
|
||||
<view class='key-cell cell_b' data-num='-1'></view>
|
||||
</view>
|
||||
<view class="key-zero-and-point">
|
||||
<view class="a cell_b zero" data-num='0'>0</view>
|
||||
<view class="a cell_b point" data-num='.'>.</view>
|
||||
</view>
|
||||
|
||||
<view @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
|
||||
<text data-num='D'>C</text>
|
||||
</view>
|
||||
|
||||
<view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
|
||||
<view data-num='S' class="">
|
||||
<view data-num='S' class="title">{{title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
name:"keyBoard",
|
||||
props:{
|
||||
title:{
|
||||
default:'确认',
|
||||
type:String
|
||||
},
|
||||
btnColor:{
|
||||
default:'green',
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
money:'',
|
||||
Cdel:'',
|
||||
Time:''
|
||||
}
|
||||
},
|
||||
|
||||
watch:{
|
||||
money(val){
|
||||
this.$emit('update:money',val);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods : {
|
||||
touchstart(){
|
||||
this.Time=setInterval(()=>{
|
||||
console.log(this.money);
|
||||
if(this.money==''){
|
||||
clearInterval();
|
||||
}
|
||||
this.money = this.money.substring(0,this.money.length - 1);
|
||||
},200)
|
||||
},
|
||||
touchend(){
|
||||
clearInterval(this.Time);
|
||||
},
|
||||
//处理按键
|
||||
_handleKeyPress(e) {
|
||||
console.log('点击传e',e.target.dataset.num);
|
||||
let num = e.target.dataset.num;
|
||||
//不同按键处理逻辑
|
||||
// -1 代表无效按键,直接返回
|
||||
if (num == -1) return false;
|
||||
switch (String(num)) {
|
||||
//小数点
|
||||
case '.':
|
||||
this._handleDecimalPoint();
|
||||
break;
|
||||
//删除键
|
||||
case 'D':
|
||||
this._handleDeleteKey();
|
||||
break;
|
||||
//清空键
|
||||
case 'C':
|
||||
this._handleClearKey();
|
||||
break;
|
||||
//确认键
|
||||
case 'S':
|
||||
this._handleConfirmKey();
|
||||
break;
|
||||
default:
|
||||
this._handleNumberKey(num);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//处理小数点函数
|
||||
_handleDecimalPoint() {
|
||||
//如果包含小数点,直接返回
|
||||
if (this.money.indexOf('.') > -1) return false;
|
||||
//如果小数点是第一位,补0
|
||||
if (!this.money.length)
|
||||
this.money = '0.';
|
||||
//如果不是,添加一个小数点
|
||||
else
|
||||
this.money = this.money + '.';
|
||||
},
|
||||
//处理删除键
|
||||
_handleDeleteKey() {
|
||||
let S = this.money;
|
||||
//如果没有输入,直接返回
|
||||
if (!S.length) return false;
|
||||
//否则删除最后一个
|
||||
this.money = S.substring(0, S.length - 1);
|
||||
},
|
||||
|
||||
//处理清空键
|
||||
_handleClearKey() {
|
||||
this.money = '';
|
||||
},
|
||||
|
||||
//处理数字
|
||||
_handleNumberKey(num) {
|
||||
if(this.money.length==10){
|
||||
return
|
||||
}
|
||||
let S = this.money;
|
||||
//如果有小数点且小数点位数不小于2
|
||||
if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
||||
this.money = S + num;
|
||||
//没有小数点
|
||||
if (!(S.indexOf('.') > -1)) {
|
||||
//如果第一位是0,只能输入小数点
|
||||
if (num == 0 && S.length == 0)
|
||||
this.money = '0.';
|
||||
else {
|
||||
if (S.length && Number(S.charAt(0)) === 0) return;
|
||||
this.money = S + num;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//提交
|
||||
_handleConfirmKey() {
|
||||
let S = this.money;
|
||||
//未输入
|
||||
if (!S.length||S==0){
|
||||
uni.showToast({
|
||||
title: '请输入正确的数值',
|
||||
icon:'none',
|
||||
duration: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//将 8. 这种转换成 8.00
|
||||
if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
|
||||
S = Number(S.substring(0, S.length - 1)).toFixed(2);
|
||||
//保留两位
|
||||
S = Number(S).toFixed(2);
|
||||
this.$emit('confirmEvent',S); //提交参数
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cell_b{
|
||||
border-right: 1px solid #d5d5d6;
|
||||
border-bottom: 1px solid #d5d5d6;
|
||||
}
|
||||
|
||||
.key-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
flex: 1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40vh;
|
||||
width: 100%;
|
||||
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.keyboard .key-row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
position: relative;
|
||||
height: 10vh;
|
||||
line-height: 10vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.keyboard .key-cell {
|
||||
flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
font-size: 60upx;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 30vh;
|
||||
width: 25%;
|
||||
line-height: 30vh;
|
||||
color: #FFFFFF;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm2 {
|
||||
position: absolute;
|
||||
height: 10vh;
|
||||
width: 25%;
|
||||
line-height: 10vh;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.key-zero-and-point{
|
||||
display: flex;height: 10vh;justify-content: center;align-items: center;width:75%;font-size: 60upx;
|
||||
.zero{
|
||||
display: flex;justify-content: center;align-items: center;width: 66.66%;font-size: 60upx;text-align: center;height: 100%;
|
||||
}
|
||||
.point{
|
||||
display: flex;justify-content: center;align-items: center;width: 33.33%;font-size: 60upx;text-align: center;height: 100%;
|
||||
}
|
||||
}
|
||||
.key-cell:active{
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要,就是通过这个透明度来设置
|
||||
}
|
||||
.a:active,.key-confirm2:active{
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要,就是通过这个透明度来设置
|
||||
}
|
||||
</style>
|
||||
@@ -1,301 +0,0 @@
|
||||
<template>
|
||||
<view class='keyboard' @click.stop='_handleKeyPress'>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='1'>1</view>
|
||||
<view class='key-cell cell_b' data-num='2'>2</view>
|
||||
<view class='key-cell cell_b' data-num='3'>3</view>
|
||||
</view>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='4'>4</view>
|
||||
<view class='key-cell cell_b' data-num='5'>5</view>
|
||||
<view class='key-cell cell_b' data-num='6'>6</view>
|
||||
</view>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='7'>7</view>
|
||||
<view class='key-cell cell_b' data-num='8'>8</view>
|
||||
<view class='key-cell cell_b' data-num='9'>9</view>
|
||||
</view>
|
||||
<view class='key-row'>
|
||||
<view class='key-cell cell_b' data-num='.'></view>
|
||||
<view class='key-cell cell_b' data-num='0'>0</view>
|
||||
<view class='key-cell cell_b' data-num='D' style="background: #F9F9F9;" @touchstart="touchstart"
|
||||
@touchend="touchend">
|
||||
<image data-num='D' style="width: 47.49rpx; height: 25.59rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/x.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="key-zero-and-point">
|
||||
<view class="a cell_b zero" data-num='0'>0</view>
|
||||
<view class="a cell_b point" data-num='.'>.</view>
|
||||
</view> -->
|
||||
<!-- <view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
|
||||
<view data-num='S' class="">
|
||||
<view data-num='S' class="title">{{title}}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "keyBoard",
|
||||
props: {
|
||||
title: {
|
||||
default: '确认',
|
||||
type: String
|
||||
},
|
||||
btnColor: {
|
||||
default: 'green',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
money: '',
|
||||
Cdel: '',
|
||||
Time: ''
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
money(val) {
|
||||
this.$emit('update:money', val);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
touchstart() {
|
||||
this.Time = setInterval(() => {
|
||||
console.log(this.money);
|
||||
if (this.money == '') {
|
||||
clearInterval();
|
||||
}
|
||||
this.money = this.money.substring(0, this.money.length - 1);
|
||||
}, 200)
|
||||
},
|
||||
touchend() {
|
||||
clearInterval(this.Time);
|
||||
},
|
||||
//处理按键
|
||||
_handleKeyPress(e) {
|
||||
console.log('点击传e', e.target.dataset.num);
|
||||
let num = e.target.dataset.num;
|
||||
//不同按键处理逻辑
|
||||
// -1 代表无效按键,直接返回
|
||||
if (num == -1) return false;
|
||||
switch (String(num)) {
|
||||
//小数点
|
||||
case '.':
|
||||
// uni.showToast({
|
||||
// title: '不可以设置.!',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// this._handleDecimalPoint();
|
||||
break;
|
||||
//删除键
|
||||
case 'D':
|
||||
this._handleDeleteKey();
|
||||
break;
|
||||
//清空键
|
||||
case 'C':
|
||||
this._handleClearKey();
|
||||
break;
|
||||
//确认键
|
||||
case 'S':
|
||||
this._handleConfirmKey();
|
||||
break;
|
||||
default:
|
||||
this._handleNumberKey(num);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//处理小数点函数
|
||||
_handleDecimalPoint() {
|
||||
//如果包含小数点,直接返回
|
||||
if (this.money.indexOf('.') > -1) return false;
|
||||
//如果小数点是第一位,补0
|
||||
if (!this.money.length)
|
||||
this.money = '0.';
|
||||
//如果不是,添加一个小数点
|
||||
else
|
||||
this.money = this.money + '.';
|
||||
},
|
||||
//处理删除键
|
||||
_handleDeleteKey() {
|
||||
let S = this.money;
|
||||
//如果没有输入,直接返回
|
||||
if (!S.length) return false;
|
||||
//否则删除最后一个
|
||||
this.money = S.substring(0, S.length - 1);
|
||||
},
|
||||
|
||||
//处理清空键
|
||||
_handleClearKey() {
|
||||
this.money = '';
|
||||
},
|
||||
|
||||
//处理数字
|
||||
_handleNumberKey(num) {
|
||||
if (this.money.length == 6) {
|
||||
return
|
||||
}
|
||||
let S = this.money;
|
||||
//如果有小数点且小数点位数不小于2
|
||||
// if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
||||
this.money = S + num;
|
||||
//没有小数点
|
||||
// if (!(S.indexOf('.') > -1)) {
|
||||
// //如果第一位是0,只能输入小数点
|
||||
// if (num == 0 && S.length == 0)
|
||||
// this.money = '0';
|
||||
// else {
|
||||
// if (S.length && Number(S.charAt(0)) === 0) return;
|
||||
// this.money = S + num;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
//提交
|
||||
_handleConfirmKey() {
|
||||
let S = this.money;
|
||||
//未输入
|
||||
if (!S.length || S == 0) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的数值',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//将 8. 这种转换成 8.00
|
||||
if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
|
||||
S = Number(S.substring(0, S.length - 1)).toFixed(2);
|
||||
//保留两位
|
||||
S = Number(S).toFixed(2);
|
||||
this.$emit('confirmEvent', S); //提交参数
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cell_b {
|
||||
border-right: 1px solid #DBDBDB;
|
||||
border-bottom: 1px solid #DBDBDB;
|
||||
}
|
||||
|
||||
.key-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
flex: 1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 32vh;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-top: 1rpx solid #DBDBDB;
|
||||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.keyboard .key-row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
position: relative;
|
||||
height: 8vh;
|
||||
line-height: 8vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.keyboard .key-cell {
|
||||
flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: 30vh;
|
||||
width: 25%;
|
||||
line-height: 30vh;
|
||||
color: #FFFFFF;
|
||||
z-index: 5;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyboard .key-confirm2 {
|
||||
position: absolute;
|
||||
height: 8vh;
|
||||
width: 25%;
|
||||
line-height: 8vh;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key-zero-and-point {
|
||||
display: flex;
|
||||
height: 8vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
font-size: 60upx;
|
||||
|
||||
.zero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 66.66%;
|
||||
font-size: 60upx;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.point {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 33.33%;
|
||||
font-size: 60upx;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.key-cell:active {
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要,就是通过这个透明度来设置
|
||||
}
|
||||
|
||||
.a:active,
|
||||
.key-confirm2:active {
|
||||
color: white;
|
||||
background: black; //黑色
|
||||
opacity: 0.1; //这里重要,就是通过这个透明度来设置
|
||||
}
|
||||
</style>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<view class="l-barrage">
|
||||
<block v-for="(item,index) in items" :key="index">
|
||||
<!-- #ifdef H5 -->
|
||||
<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color}">
|
||||
{{item.text}}
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- <text v-if="item.display" class="aon"
|
||||
:style="{top: `${item.top}%`,color: item.color,
|
||||
animation: `mymove ${Number(item.time)}s linear forwards`
|
||||
}"
|
||||
>
|
||||
{{item.text}}
|
||||
</text> -->
|
||||
<view v-if="item.display" class="aon"
|
||||
style=" display: flex;justify-content: center;align-items: center; background-color: #000; padding:10rpx; border-radius: 10rpx;"
|
||||
:style="{top: `${item.top}%`,
|
||||
animation: `mymove ${Number(item.time)}s linear forwards`
|
||||
}">
|
||||
<image style="width: 50rpx; height: 50rpx;border-radius: 50%;" :src="avatar"
|
||||
mode="aspectFill"></image>
|
||||
<text style="color: #fff;">
|
||||
{{item.text}}
|
||||
</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cycle;
|
||||
|
||||
// 弹幕字体颜色
|
||||
function getRandomColor() {
|
||||
let rgb = []
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16)
|
||||
color = color.length == 1 ? '0' + color : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'l-barrage',
|
||||
props: {
|
||||
minTime: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
maxTime: {
|
||||
type: Number,
|
||||
default: 9
|
||||
},
|
||||
minTop: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
maxTop: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
avatar:{
|
||||
type:String,
|
||||
default:'@/static/1.gif'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this
|
||||
.minTime))) {
|
||||
this.items.push({
|
||||
text,
|
||||
time,
|
||||
top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
|
||||
color: getRandomColor(),
|
||||
display: 1,
|
||||
});
|
||||
},
|
||||
start(items = []) {
|
||||
this.items = [];
|
||||
cycle && (clearInterval(cycle));
|
||||
let i = 0,
|
||||
len = items.length;
|
||||
|
||||
cycle = setInterval(() => {
|
||||
let time = 5;
|
||||
// #ifndef H5
|
||||
time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime));
|
||||
// #endif
|
||||
|
||||
if (i < len) {
|
||||
this.add(items[i], time);
|
||||
i++;
|
||||
} else {
|
||||
clearInterval(cycle);
|
||||
setTimeout(() => {
|
||||
this.$emit("end", {});
|
||||
}, time * 1000)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.aon {
|
||||
position: fixed;
|
||||
white-space: nowrap;
|
||||
|
||||
animation: mymove 5s linear forwards;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.l-barrage {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@keyframes mymove {
|
||||
from {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes mymove
|
||||
|
||||
/* Firefox */
|
||||
{
|
||||
from {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove
|
||||
|
||||
/* Safari and Chrome */
|
||||
{
|
||||
from {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes mymove
|
||||
|
||||
/* Opera */
|
||||
{
|
||||
from {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -200%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="contentone flex-center">
|
||||
<image class="contentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/ewm.png" mode="aspectFill"></image>
|
||||
<text class="contentonetext">精选推荐</text>
|
||||
</view>
|
||||
<view class="contenttow flex-between">
|
||||
<view class="contenttowitem" v-for="(item,index) in list" :key="index" @click="clickproduct(item)">
|
||||
<image class="contenttowitemimage" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="contenttowitemtiter">
|
||||
{{item.shopName}}|{{item.productName}}
|
||||
</view>
|
||||
<view class="contenttowitemone flex-between">
|
||||
<view class="contenttowitemone_dingwei flex-start">
|
||||
<image class="contenttowitemone_dingweiimage"
|
||||
:src="item.image" mode="aspectFill"></image>
|
||||
<view class="contenttowitemone_dingweinumer">
|
||||
{{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contenttowitemone_text">
|
||||
已售{{item.realSalesNumber}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contenttowitemtow flex-start">
|
||||
<view class="contenttowitemtow_one">
|
||||
券后¥{{item.salePrice}}
|
||||
</view>
|
||||
<view class="contenttowitemtow_tow">
|
||||
{{item.discount}}折
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
opacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
titleshow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
clicknavigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.contentone {
|
||||
.contentoneimage {
|
||||
width: 32.12rpx;
|
||||
height: 36.13rpx;
|
||||
}
|
||||
|
||||
.contentonetext {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttow {
|
||||
width: 100%;
|
||||
|
||||
.contenttowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 316rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
.contenttowitemimage {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.contenttowitemtiter {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.contenttowitemone {
|
||||
padding: 0 20rpx;
|
||||
.contenttowitemone_dingwei {
|
||||
margin-top: 6rpx;
|
||||
.contenttowitemone_dingweiimage {
|
||||
width: 17.9rpx;
|
||||
height: 21.65rpx;
|
||||
}
|
||||
|
||||
.contenttowitemone_dingweinumer {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttowitemone_text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttowitemtow {
|
||||
padding: 0 20rpx 8rpx 20rpx;
|
||||
|
||||
.contenttowitemtow_one {
|
||||
margin-top: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.contenttowitemtow_tow {
|
||||
margin-top: 6rpx;
|
||||
margin-left: 6rpx;
|
||||
padding: 2rpx 14rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #FF4C11;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar" :class="{active:opacity}">
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- 标题搜索框 -->
|
||||
<view class="flex-between">
|
||||
<view class="navbar_tow_one flex-start">
|
||||
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
||||
size="16"></u-icon>
|
||||
</view>
|
||||
<view class="navbar_tow_tow flex-start">
|
||||
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
|
||||
<view class="navbar_tow_towview">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
opacity: false,
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
.active {
|
||||
background: rgba(249, 249, 249, 1);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
// #ifdef APP-PLUS
|
||||
height: calc(var(--status-bar-height) / 2);
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
height: var(--status-bar-height);
|
||||
// #endif
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
.statusbarmargin {
|
||||
margin-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
// #endif
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.navbar_tow {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 36rpx;
|
||||
|
||||
.flex-between {
|
||||
// #ifdef APP-PLUS || H5
|
||||
margin: 28rpx;
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
margin-left: 28rpx;
|
||||
// #endif
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
.navbar_tow_one {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar_tow_tow {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
flex: 1;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.navbar_tow_towview {
|
||||
position: absolute;
|
||||
right: 4rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
text-align: center;
|
||||
background: #FEE06A;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 34rpx 34rpx 34rpx 34rpx;
|
||||
}
|
||||
|
||||
.navbar_tow_towinput {
|
||||
padding-left: 32rpx;
|
||||
padding-right: 116rpx;
|
||||
height: 100%;
|
||||
flex: auto;
|
||||
background: #FFFFFF;
|
||||
border-radius: 34rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<view class="navbarcontent">
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar" :class="{active:opacity}">
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- 标题搜索框 -->
|
||||
<view class="flex-between" @click="clicknavigateBack">
|
||||
<view class="navbar_tow_one flex-start" v-if="iconshow">
|
||||
<u-icon name="arrow-left" :color="iconcolor" size="40"></u-icon>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="navbar_tow_tow" v-if="opacity || titleshow" :style="{color: namecolor}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="navbar_tow_tow" v-if="opacity || titleshow"
|
||||
:style="{'padding-left':HeighT.custwidth-14 + 'px',color: namecolor}">
|
||||
<!-- #endif -->
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="heightshow" :style="{height:Topdistance +'px'}">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Topdistance: ''
|
||||
};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
namecolor: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
opacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
titleshow: {//标题是否显示
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
heightshow: {//是否要占位高度
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconshow: {//返回键是否显示
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
iconcolor:{//返回键颜色
|
||||
type: String,
|
||||
default: '#000'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.GetTop()
|
||||
});
|
||||
// 当组件挂载完成后获取距离
|
||||
|
||||
},
|
||||
methods: {
|
||||
GetTop() {
|
||||
this.$u.getRect('.navbar').then(res => {
|
||||
this.Topdistance = res.height //滚动距离
|
||||
this.$emit('Topdistance', res.height)
|
||||
})
|
||||
},
|
||||
clicknavigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.navbarcontent {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
|
||||
.active {
|
||||
background: rgba(249, 249, 249, 1);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
// #ifdef APP-PLUS
|
||||
height: calc(var(--status-bar-height) / 2);
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
height: var(--status-bar-height);
|
||||
// #endif
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
.statusbarmargin {
|
||||
margin-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
// #endif
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.navbar_tow {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 36rpx;
|
||||
|
||||
.flex-between {
|
||||
// #ifdef APP-PLUS || H5
|
||||
margin: 28rpx;
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
margin-left: 28rpx;
|
||||
// #endif
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
.navbar_tow_one {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar_tow_tow {
|
||||
|
||||
text-align: center;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view>
|
||||
<view class="pay-title">
|
||||
<text>请输入6位支付密码</text>
|
||||
</view>
|
||||
<view class="pay-password" @click="onPayUp">
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 1">●</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 2">●</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 3">●</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 4">●</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 5">●</text>
|
||||
</view>
|
||||
<view class="list">
|
||||
<text v-show="passwordArr.length >= 6">●</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hint" @click="gopaypassword">
|
||||
<text>忘记支付密码?</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- ref:唯一ref passwrdType:密码样式pay keyInfo:密码输入返回事件 -->
|
||||
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// AffirmStatus: 1,
|
||||
passwordArr: [],
|
||||
oldPasswordArr: [],
|
||||
newPasswordArr: [],
|
||||
afPasswordArr: [],
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 忘记支付密码
|
||||
gopaypassword() {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword')
|
||||
},
|
||||
/**
|
||||
* 唤起键盘
|
||||
*/
|
||||
onPayUp() {
|
||||
this.$refs.CodeKeyboard.show();
|
||||
},
|
||||
/**
|
||||
* 支付键盘回调
|
||||
* @param {Object} val
|
||||
*/
|
||||
KeyInfo(val) {
|
||||
|
||||
if (val.index >= 6) {
|
||||
return;
|
||||
}
|
||||
// 判断是否输入的是删除键
|
||||
if (val.keyCode === 8) {
|
||||
// 删除最后一位
|
||||
this.passwordArr.splice(val.index + 1, 1)
|
||||
}
|
||||
// 判断是否输入的是.
|
||||
else if (val.keyCode == 190) {
|
||||
// 输入.无效
|
||||
} else {
|
||||
this.passwordArr.push(val.key);
|
||||
}
|
||||
|
||||
// uni.showModal({
|
||||
// title: '温馨提示',
|
||||
// content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
|
||||
// })
|
||||
|
||||
// 判断是否等于6
|
||||
if (this.passwordArr.length === 6) {
|
||||
// this.AffirmStatus = this.AffirmStatus + 1;
|
||||
let str = ''
|
||||
this.passwordArr.forEach(res => {
|
||||
str += res
|
||||
})
|
||||
this.$emit('accountPayevent', str)
|
||||
this.passwordArr = [];
|
||||
}
|
||||
// 判断到哪一步了
|
||||
// if (this.AffirmStatus === 1) {
|
||||
// this.oldPasswordArr = this.passwordArr;
|
||||
// } else if (this.AffirmStatus === 2) {
|
||||
// this.newPasswordArr = this.passwordArr;
|
||||
// } else if (this.AffirmStatus === 3) {
|
||||
// this.afPasswordArr = this.passwordArr;
|
||||
// } else if (this.AffirmStatus === 4) {
|
||||
// console.log(this.oldPasswordArr.join(''));
|
||||
// console.log(this.newPasswordArr.join(''));
|
||||
// console.log(this.afPasswordArr.join(''));
|
||||
// uni.showToast({
|
||||
// title: '修改成功',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// uni.navigateBack();
|
||||
// }, 2000)
|
||||
// }
|
||||
this.$forceUpdate();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$base: #555; // 基础颜色
|
||||
|
||||
.page {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.pay-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-password {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
margin: 20rpx auto;
|
||||
border: 2rpx solid $base;
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16.666%;
|
||||
height: 100%;
|
||||
border-right: 2rpx solid #EEEEEE;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list:nth-child(6) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<picker mode="multiSelector"
|
||||
:value="multiIndex"
|
||||
:range="multiArray"
|
||||
@change="handleValueChange"
|
||||
@columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const CHINA_REGIONS = require('./regions.json')
|
||||
export default {
|
||||
props:{
|
||||
defaultRegions:{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultRegionCode:{
|
||||
type:String
|
||||
},
|
||||
defaultRegion:[String,Array]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityArr:CHINA_REGIONS[0].childs,
|
||||
districtArr:CHINA_REGIONS[0].childs[0].childs,
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray:true,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
defaultRegion:{
|
||||
handler(region,oldRegion){
|
||||
if(Array.isArray(region)){
|
||||
// 避免传的是字面量的时候重复触发
|
||||
oldRegion = oldRegion || []
|
||||
if(region.join('')!==oldRegion.join('')){
|
||||
this.handleDefaultRegion(region)
|
||||
}
|
||||
}else if(region&®ion.length == 6){
|
||||
this.handleDefaultRegion(region)
|
||||
}else{
|
||||
console.warn('defaultRegion非有效格式')
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
multiArray(){
|
||||
return this.pickedArr.map(arr=>arr.map(item=>item.name))
|
||||
},
|
||||
pickedArr(){
|
||||
// 进行初始化
|
||||
if(this.isInitMultiArray){
|
||||
return [
|
||||
CHINA_REGIONS,
|
||||
CHINA_REGIONS[0].childs,
|
||||
CHINA_REGIONS[0].childs[0].childs
|
||||
]
|
||||
}
|
||||
return [CHINA_REGIONS,this.cityArr,this.districtArr];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleColumnChange(e){
|
||||
// console.log(e);
|
||||
this.isInitMultiArray = false;
|
||||
const that = this;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
that.multiIndex[col] = row;
|
||||
try{
|
||||
switch(col){
|
||||
case 0:
|
||||
if(CHINA_REGIONS[that.multiIndex[0]].childs.length==0){
|
||||
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
|
||||
break;
|
||||
}
|
||||
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 1:
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 2:
|
||||
break;
|
||||
}
|
||||
}catch(e){
|
||||
// console.log(e);
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
|
||||
}
|
||||
|
||||
},
|
||||
handleValueChange(e){
|
||||
// 结构赋值
|
||||
let [index0,index1,index2] = e.detail.value;
|
||||
let [arr0,arr1,arr2] = this.pickedArr;
|
||||
let address = [arr0[index0],arr1[index1],arr2[index2]];
|
||||
// console.log(address);
|
||||
this.$emit('getRegion',address)
|
||||
},
|
||||
handleDefaultRegion(region){
|
||||
const isCode = !Array.isArray(region)
|
||||
this.isInitMultiArray = false;
|
||||
let children = CHINA_REGIONS
|
||||
for(let i=0;i<3;i++){
|
||||
for(let j=0;j<children.length;j++){
|
||||
let condition = isCode?children[j].code==region.slice(0,(i+1)*2):children[j].name.includes(region[i]);
|
||||
if(condition){
|
||||
// 匹配成功进行赋值
|
||||
// console.log(i,j,children.length-1);
|
||||
children = children[j].childs;
|
||||
if(i==0){
|
||||
this.cityArr = children
|
||||
}else if(i==1){
|
||||
this.districtArr = children
|
||||
}
|
||||
this.$set(this.multiIndex,i,j)
|
||||
// console.log(this.multiIndex);
|
||||
break;
|
||||
}else{
|
||||
// 首次匹配失败就用默认的初始化
|
||||
// console.log(i,j,children.length-1);
|
||||
if(i==0 && j==(children.length-1)){
|
||||
this.isInitMultiArray = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<view class="nav">
|
||||
<view class="nav-left">
|
||||
<scroll-view scroll-y>
|
||||
<view class="nav-left-item" v-for="(item, index) in categoryList"
|
||||
@click="categoryClickMain(item, index)" :key="index"
|
||||
:style="index == categoryActive ? 'color:' + activeTextColor + ';background-color:' + activeBackgroundColor : ''">
|
||||
{{ item[label] }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="nav-right" v-if="!subCategoryList.length == 0">
|
||||
<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="loadMore"
|
||||
scroll-with-animation>
|
||||
<view class="nav-right-item" v-for="(item, index2) in subCategoryList" :key="index2"
|
||||
@click="categoryClickSub(item)">
|
||||
<view>{{ item[label] }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'category',
|
||||
data() {
|
||||
return {
|
||||
h: null,
|
||||
namelang: '',
|
||||
keyword: '请输入相关行业',
|
||||
height: 0,
|
||||
scrollTop: 0,
|
||||
scrollHeight: 0,
|
||||
categoryActive: 0,
|
||||
activeStyle: {
|
||||
color: this.activeTextColor,
|
||||
backgroundColor: this.activeBackgroundColor
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//主分类激活索引
|
||||
merchant: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
defaultActive: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//主分类List
|
||||
categoryList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
//侧边分类List
|
||||
subCategoryList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
activeTextColor: {
|
||||
type: String,
|
||||
default: '#FF981E'
|
||||
},
|
||||
activeBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,0)'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: 'logo'
|
||||
},
|
||||
//主分类点击事件
|
||||
categoryMainClick: {},
|
||||
//子分类点击事件
|
||||
categorySubClick: {}
|
||||
},
|
||||
methods: {
|
||||
async computed_h() {
|
||||
//获取div宽度
|
||||
let content_Icon = await uni.utils.info_distance('Box_top');
|
||||
let content_top_box = await uni.utils.info_distance('Box_text');
|
||||
let system_info = await uni.getSystemInfo();
|
||||
var h_ = system_info.windowHeight + 'px';
|
||||
this.h = {
|
||||
height: h_
|
||||
};
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollHeight = e.detail.scrollHeight;
|
||||
},
|
||||
categoryClickMain(category, index) {
|
||||
this.namelang = category.name
|
||||
this.$emit('categoryMainClick', {
|
||||
'category': category,
|
||||
'index': index
|
||||
});
|
||||
this.categoryActive = index;
|
||||
this.scrollTop = -this.scrollHeight * index;
|
||||
},
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
this.$emit('loadMores');
|
||||
},
|
||||
categoryClickSub(category) {
|
||||
this.$emit('categorySubClick', category);
|
||||
},
|
||||
searchkeyword() {
|
||||
this.$emit('searchkeyword', this.keyword)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.categoryActive = this.defaultActive;
|
||||
this.computed_h();
|
||||
// uni.getSystemInfo({
|
||||
// success: res => {
|
||||
// console.log(res);
|
||||
// this.height = res.windowHeight;
|
||||
// }
|
||||
// });
|
||||
},
|
||||
watch: {
|
||||
subCategoryList(newValue, oldValue) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Box_top {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.Box_text {
|
||||
background: #f1f0f5;
|
||||
padding: 10rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.Box_texttext {
|
||||
margin-left: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
max-height: 600rpx;
|
||||
width: 30%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-left-item {
|
||||
padding: 10rpx 0;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 70%;
|
||||
max-height: 600rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-right-item {
|
||||
width: 100%;
|
||||
border-left: solid 1px #e0e0e0;
|
||||
/* height: 100px; */
|
||||
text-align: left;
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-right-item image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #f24544;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
background-color: #f24544;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,210 +0,0 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="tki-qrcode">
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
|
||||
<!-- #endif -->
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "tki-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'tki-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.tki-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.tki-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="scroll_box">
|
||||
<swiper class="swiper" circular="true" vertical="true" display-multiple-items="4" :autoplay="autoplay"
|
||||
:interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="line1">{{item.nickName}}</view>
|
||||
<view class="line2">
|
||||
<text>抽到</text>
|
||||
<text class="line2-amount">{{item.value}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
datalist: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
datalist: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.list = val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.swiper {
|
||||
height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.swiper-item .line1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.swiper-item .line2 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.swiper-item .line2 .line2-amount {
|
||||
color: #EF4A4A;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +1,22 @@
|
||||
const debug = process.env.NODE_ENV == 'development' ? true : false;
|
||||
const debug = true;
|
||||
// #ifdef H5
|
||||
const proxyApi = "/api"
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || APP
|
||||
// const proxyApi = 'http://192.168.2.42:9889/cashierService' // 王伟
|
||||
// const proxyApi = 'http://192.168.2.74:9888/cashierService' // 帆哥
|
||||
// const proxyApiwws = 'ws://192.168.2.74:9888/cashierService' // 测试
|
||||
const proxyApi = 'https://wxcashiertest.sxczgkj.cn/cashierService' // 测试
|
||||
const proxyApiwws = 'wss://wxcashiertest.sxczgkj.cn/netty' // 测试
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
const baseUrl = 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
const baseUrlwws = 'wss://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
// const baseUrl = "https://wxcashiertest.sxczgkj.cn/cashierService" //测试
|
||||
// const baseUrlwws = 'wss://wxcashiertest.sxczgkj.cn/cashierService' // 测试
|
||||
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
const baseUrl = debug ? proxyApi + '/cashierService' : "https://cashier.sxczgkj.cn/cashierService"
|
||||
const baseUrlwws = 'ws://cashier.sxczgkj.cn/cashierService'
|
||||
const baseUrl = debug ? proxyApi : 'http://192.168.2.161:9889/cashierService/' // 线上
|
||||
// #endif
|
||||
|
||||
// #ifdef APP || MP-WEIXIN
|
||||
const baseUrl = debug ? proxyApi : 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
const baseUrlwws = debug ? proxyApiwws : 'wss://cashier.sxczgkj.cn/netty' // 线上
|
||||
// const baseUrl = 'https://cashier.sxczgkj.cn/cashierService' // 线上
|
||||
// const baseUrlwws = 'wss://cashier.sxczgkj.cn/netty' // 线上/
|
||||
// #endif
|
||||
|
||||
// import VConsole from "./vConsole.js"
|
||||
// if (debug) {
|
||||
// new VConsole()
|
||||
// // new VConsole()
|
||||
// }
|
||||
const version = '100'
|
||||
const version = '109'
|
||||
const autoRemoveCache = {
|
||||
count: 100000,
|
||||
size: 100000
|
||||
|
||||
@@ -10,26 +10,26 @@ let transformRequest = obj => {
|
||||
let query = ''
|
||||
let name, value, fullSubName, subName, subValue, innerObj, i
|
||||
|
||||
for (name in obj) {
|
||||
for(name in obj) {
|
||||
value = obj[name]
|
||||
|
||||
if (value instanceof Array) {
|
||||
for (i = 0; i < value.length; ++i) {
|
||||
if(value instanceof Array) {
|
||||
for(i = 0; i < value.length; ++i) {
|
||||
subValue = value[i]
|
||||
fullSubName = name + '[' + i + ']'
|
||||
innerObj = {}
|
||||
innerObj[fullSubName] = subValue
|
||||
query += transformRequest(innerObj) + '&'
|
||||
}
|
||||
} else if (value instanceof Object) {
|
||||
for (subName in value) {
|
||||
} else if(value instanceof Object) {
|
||||
for(subName in value) {
|
||||
subValue = value[subName]
|
||||
fullSubName = name + '[' + subName + ']'
|
||||
innerObj = {}
|
||||
innerObj[fullSubName] = subValue
|
||||
query += transformRequest(innerObj) + '&'
|
||||
}
|
||||
} else if (value !== undefined && value !== null) {
|
||||
} else if(value !== undefined && value !== null) {
|
||||
query += encodeURIComponent(name) + '=' +
|
||||
encodeURIComponent(value) + '&'
|
||||
}
|
||||
@@ -44,7 +44,7 @@ let timestamp = function() {
|
||||
|
||||
let isNavigating = false
|
||||
let isNavigate = () => {
|
||||
if (isNavigating) {
|
||||
if(isNavigating) {
|
||||
return true
|
||||
} else {
|
||||
isNavigating = true
|
||||
@@ -62,11 +62,11 @@ let guid = (function() {
|
||||
let guid = new Date().getTime().toString(32),
|
||||
i
|
||||
|
||||
for (i = 0; i < 5; i++) {
|
||||
for(i = 0; i < 5; i++) {
|
||||
guid += Math.floor(Math.random() * 65535).toString(32)
|
||||
}
|
||||
|
||||
return (prefix || '') + guid + (counter++).toString(32)
|
||||
return(prefix || '') + guid + (counter++).toString(32)
|
||||
}
|
||||
}())
|
||||
|
||||
@@ -75,7 +75,7 @@ let sortTransform = (obj) => {
|
||||
objKeys = objKeys.sort()
|
||||
|
||||
var ret = {}
|
||||
for (var i = 0; i < objKeys.length; i++) {
|
||||
for(var i = 0; i < objKeys.length; i++) {
|
||||
let objVal = obj[objKeys[i]]
|
||||
ret[objKeys[i]] = objVal
|
||||
}
|
||||
@@ -95,8 +95,8 @@ function isEmptyObject(v) {
|
||||
return Object.keys(v).length == 0
|
||||
}
|
||||
|
||||
function sleep(time) {
|
||||
return new Promise((resolve) => setTimeout(resolve, time))
|
||||
function sleep (time) {
|
||||
return new Promise((resolve) => setTimeout(resolve, time))
|
||||
}
|
||||
|
||||
const throttle = function(func, wait = 200, options) {
|
||||
@@ -110,7 +110,7 @@ const throttle = function(func, wait = 200, options) {
|
||||
var context, args, result
|
||||
var timeout = null
|
||||
var previous = 0
|
||||
if (!options) options = {
|
||||
if(!options) options = {
|
||||
leading: true,
|
||||
trailing: false
|
||||
}
|
||||
@@ -118,26 +118,26 @@ const throttle = function(func, wait = 200, options) {
|
||||
previous = options.leading === false ? 0 : new Date().getTime()
|
||||
timeout = null
|
||||
result = func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
if(!timeout) context = args = null
|
||||
}
|
||||
return function() {
|
||||
var now = new Date().getTime()
|
||||
if (!previous && options.leading === false) previous = now
|
||||
if(!previous && options.leading === false) previous = now
|
||||
// 计算剩余时间
|
||||
var remaining = wait - (now - previous)
|
||||
context = this
|
||||
args = arguments
|
||||
// 当到达wait指定的时间间隔,则调用func函数
|
||||
if (remaining <= 0 || remaining > wait) {
|
||||
if(remaining <= 0 || remaining > wait) {
|
||||
// 由于setTimeout存在最小时间精度问题,因此会存在到达wait的时间间隔,但之前设置的setTimeout操作还没被执行,因此为保险起见,这里先清理setTimeout操作
|
||||
if (timeout) {
|
||||
if(timeout) {
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
}
|
||||
previous = now
|
||||
result = func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
} else if (!timeout && options.trailing !== false) {
|
||||
if(!timeout) context = args = null
|
||||
} else if(!timeout && options.trailing !== false) {
|
||||
// options.trailing=true时,延时执行func函数
|
||||
timeout = setTimeout(later, remaining)
|
||||
}
|
||||
@@ -153,13 +153,13 @@ const debounce = function(func, wait, immediate) {
|
||||
// 当wait指定的时间间隔期间多次调用_.debounce返回的函数,则会不断更新timestamp的值,导致last < wait && last >= 0一直为true,从而不断启动新的计时器延时执行func
|
||||
var last = new Date().getTime() - timestamp
|
||||
|
||||
if (last < wait && last >= 0) {
|
||||
if(last < wait && last >= 0) {
|
||||
timeout = setTimeout(later, wait - last)
|
||||
} else {
|
||||
timeout = null
|
||||
if (!immediate) {
|
||||
if(!immediate) {
|
||||
result = func.apply(context, args)
|
||||
if (!timeout) context = args = null
|
||||
if(!timeout) context = args = null
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -171,8 +171,8 @@ const debounce = function(func, wait, immediate) {
|
||||
// 第一次调用该方法时,且immediate为true,则调用func函数
|
||||
var callNow = immediate && !timeout
|
||||
// 在wait指定的时间间隔内首次调用该方法,则启动计时器定时调用func函数
|
||||
if (!timeout) timeout = setTimeout(later, wait)
|
||||
if (callNow) {
|
||||
if(!timeout) timeout = setTimeout(later, wait)
|
||||
if(callNow) {
|
||||
result = func.apply(context, args)
|
||||
context = args = null
|
||||
}
|
||||
@@ -181,14 +181,12 @@ const debounce = function(func, wait, immediate) {
|
||||
}
|
||||
}
|
||||
|
||||
Promise.prototype.finally = function(callback) {
|
||||
let P = this.constructor
|
||||
return this.then(
|
||||
value => P.resolve(callback()).then(() => value),
|
||||
reason => P.resolve(callback()).then(() => {
|
||||
throw reason
|
||||
})
|
||||
)
|
||||
Promise.prototype.finally = function (callback) {
|
||||
let P = this.constructor
|
||||
return this.then(
|
||||
value => P.resolve(callback()).then(() => value),
|
||||
reason => P.resolve(callback()).then(() => { throw reason })
|
||||
)
|
||||
}
|
||||
const info_distance = function(e) { //获取元素位置
|
||||
return new Promise((resolve, reject) => {
|
||||
@@ -206,37 +204,6 @@ const getCurrentRoute = function() {
|
||||
return '/' + getCurrentPage().route
|
||||
}
|
||||
|
||||
const pluschooseImage = function() {
|
||||
// #ifdef APP
|
||||
if (plus.os.name == 'Android' && plus.navigator.checkPermission('android.permission.CAMERA') ===
|
||||
'undetermined') {
|
||||
//未授权
|
||||
uni.showModal({
|
||||
title: '权限说明',
|
||||
content: '便于您使用该功能上传您的照片/图片等,请您确认授权相机与相册,否则无法使用该功能',
|
||||
confirmText: "去设置",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openAppAuthorizeSetting({
|
||||
success(res) {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
return true
|
||||
// #endif
|
||||
}
|
||||
|
||||
uni.utils = {
|
||||
md5,
|
||||
transformRequest,
|
||||
@@ -252,6 +219,5 @@ uni.utils = {
|
||||
throttle,
|
||||
debounce,
|
||||
getCurrentPage,
|
||||
getCurrentRoute,
|
||||
pluschooseImage
|
||||
}
|
||||
getCurrentRoute
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
fill
|
||||
} from "lodash"
|
||||
import store from "../store"
|
||||
|
||||
const preCacheKeyClearFetch = 'storage:clear:fetch:'
|
||||
|
||||
uni.pro.interceptor('request', {
|
||||
@@ -44,22 +44,9 @@ function requestrequest(options) {
|
||||
}
|
||||
|
||||
async function request(options) {
|
||||
let networkType = ''
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
networkType = res.networkType
|
||||
}
|
||||
});
|
||||
if (networkType == 'none') {
|
||||
uni.showToast({
|
||||
title: '网络异常,请检查网络',
|
||||
icon: 'none'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
if (options.toast) {
|
||||
// #ifdef MP-WEIXIN || APP-PLUS
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
@@ -74,27 +61,14 @@ async function request(options) {
|
||||
}
|
||||
if (options.type == 1) {
|
||||
options.header = {
|
||||
version: uni.conf.version,
|
||||
type: uni.getSystemInfoSync().platform,
|
||||
// #ifdef APP-PLUS
|
||||
environment: 'app',
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
environment: 'wx',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
environment: 'wx',
|
||||
// #endif
|
||||
token: uni.cache.get('token'),
|
||||
openId: uni.cache.get('miniAppOpenId'),
|
||||
openId: uni.cache.get('userInfo').miniAppOpenId,
|
||||
id: uni.cache.get('userInfo').id,
|
||||
loginName: "",
|
||||
clientType: ''
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
// #ifdef MP-WEIXIN || APP-PLUS
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
options.url = uni.conf.baseUrl + options.url
|
||||
let res = await requestrequest(options);
|
||||
// #endif
|
||||
@@ -102,15 +76,15 @@ async function request(options) {
|
||||
let res = await uni.pro.request(options);
|
||||
// #endif
|
||||
if (res.code != 0) {
|
||||
if (res.code == -4) {
|
||||
if (res.code == 401) {
|
||||
uni.showToast({
|
||||
title: '',
|
||||
// title: res.message || res.msg,
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success: () => {
|
||||
setTimeout(res => {
|
||||
store.dispatch("loginEvent"); //获取shapid
|
||||
}, 1000)
|
||||
uni.cache.clear();
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.code == 482) {
|
||||
@@ -127,6 +101,7 @@ async function request(options) {
|
||||
setTimeout(res => {
|
||||
if (options.toast) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.hideLoading()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.pro.hideLoading()
|
||||
@@ -136,7 +111,6 @@ async function request(options) {
|
||||
}
|
||||
})
|
||||
}
|
||||
return res
|
||||
}
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
|
||||
3
main.js
3
main.js
@@ -4,15 +4,12 @@ import useStorage from '@/utils/useStroage.js'
|
||||
import './framework/bootstrap'
|
||||
import Api from "./common/js/api.js"
|
||||
import Shop from "./common/js/shop.js"
|
||||
import store from './store'
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$store = store
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
store,
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
|
||||
207
manifest.json
207
manifest.json
@@ -1,111 +1,98 @@
|
||||
{
|
||||
"name" : "cashier_weapp",
|
||||
"appid" : "__UNI__8092421",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Barcode" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"ad" : {}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxd88fffa983758a30",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true,
|
||||
"es6" : true,
|
||||
"postcss" : true
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"libVersion" : "latest",
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos" : [ "getLocation", "onLocationChange", "chooseLocation", "chooseAddress" ]
|
||||
},
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
"https" : false,
|
||||
"disableHostCheck" : false,
|
||||
"proxy" : {
|
||||
"/api" : {
|
||||
"target" : "https://wxcashiertest.sxczgkj.cn",
|
||||
// "target" : "https://ky.sxczgkj.cn",
|
||||
"ws" : false,
|
||||
"changeOrigin" : true, //是否跨域
|
||||
"secure" : false, // 设置支持https协议的代理
|
||||
"pathRewrite" : {
|
||||
"^/api" : "" //需要rewrite重写的,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"template" : "template.h5.html",
|
||||
"router" : {
|
||||
"mode" : "history",
|
||||
"base" : "/h5/"
|
||||
}
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2"
|
||||
}
|
||||
"name": "cashier_weapp",
|
||||
"appid": "__UNI__8092421",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules": {
|
||||
"Barcode": {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute": {
|
||||
/* android打包配置 */
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios": {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp": {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin": {
|
||||
"appid": "wxd88fffa983758a30",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true,
|
||||
"libVersion": "latest"
|
||||
},
|
||||
"h5": {
|
||||
"devServer": {
|
||||
"https": false,
|
||||
"disableHostCheck": false,
|
||||
"proxy": {
|
||||
"/api": {
|
||||
"target": "https://p40312246f.goho.co/cashierService/",
|
||||
// "target" : "https://ky.sxczgkj.cn",
|
||||
"ws": false,
|
||||
"changeOrigin": true, //是否跨域
|
||||
"secure": false, // 设置支持https协议的代理
|
||||
"pathRewrite": {
|
||||
"^/api": "" //需要rewrite重写的,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"template": "template.h5.html",
|
||||
"router": {
|
||||
"mode": "history",
|
||||
"base": "/h5/"
|
||||
}
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"uniStatistics": {
|
||||
"enable": false
|
||||
},
|
||||
"vueVersion": "2"
|
||||
}
|
||||
9
package.json
Normal file
9
package.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.21"
|
||||
}
|
||||
}
|
||||
232
pages.json
232
pages.json
@@ -3,90 +3,19 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/jtoday",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日上新",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/freedaily",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日免单",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/tothestore",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约到店",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/coupons/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "红包中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/drinks",
|
||||
"style": {
|
||||
"navigationBarTitleText": "咖啡饮品",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/hotlist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "热榜推荐",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/uindexlist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择城市"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/product/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/product/generalstore",
|
||||
"style": {
|
||||
"navigationBarTitleText": "通用门店"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/register",
|
||||
"style": {
|
||||
"navigationBarTitleText": "注册"
|
||||
"navigationBarTitleText": "用户授权"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单列表",
|
||||
"navigationBarBackgroundColor": "#FFD158",
|
||||
"navigationBarTextStyle": "white"
|
||||
"navigationBarTitleText": "订单列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -95,19 +24,6 @@
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order_detail/indexs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/successful",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/index",
|
||||
"style": {
|
||||
@@ -115,11 +31,6 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员列表"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/make/make",
|
||||
"style": {
|
||||
"navigationBarTitleText": "在线预定"
|
||||
@@ -128,16 +39,7 @@
|
||||
{
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人中心",
|
||||
"navigationBarBackgroundColor": "#FFD158",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/user/repairpassword",
|
||||
"style": {
|
||||
"navigationBarTitleText": "设置安全密码",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
"navigationBarTitleText": "个人中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -159,20 +61,6 @@
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order_food/goodsList_scroll",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order_food/goodsList_swiper",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/make/list",
|
||||
"style": {
|
||||
@@ -182,117 +70,13 @@
|
||||
{
|
||||
"path": "pages/user/coupon",
|
||||
"style": {
|
||||
"navigationBarTitleText": "优惠券"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/information",
|
||||
"style": {
|
||||
"navigationBarTitleText": "完善信息",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
// {
|
||||
// "path": "pages/user/shop/index",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "积分商城",
|
||||
// "navigationStyle": "custom",
|
||||
// "navigationBarTextStyle": "black"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "path": "pages/user/shop/detail",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "积分明细",
|
||||
// "navigationStyle": "custom",
|
||||
// "navigationBarTextStyle": "black"
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// "path": "pages/user/shop/shopinfo",
|
||||
// "style": {
|
||||
// "navigationBarTitleText": "商品详情",
|
||||
// "navigationBarTextStyle": "black"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
"path": "pages/chooseasong/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "歌曲列表",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chooseasong/record",
|
||||
"style": {
|
||||
"navigationBarTitleText": "点单记录",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/address/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地址列表",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加地址",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/shop/confirm",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/group_order/order_groupdetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/product/placeOrder",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/group_order/refund",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/memberdetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员卡"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/billDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账单明细"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/member/activatedmemberone",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "会员卡"
|
||||
"navigationBarTitleText": "我的优惠卷"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "零点八零",
|
||||
"navigationBarTitleText": "银收客",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F2F2F2"
|
||||
},
|
||||
@@ -314,6 +98,12 @@
|
||||
"pagePath": "pages/order/order",
|
||||
"text": "订单"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabbar/3.png",
|
||||
"selectedIconPath": "static/tabbar/3-1.png",
|
||||
"pagePath": "pages/make/make",
|
||||
"text": "预约"
|
||||
},
|
||||
{
|
||||
"iconPath": "static/tabbar/4.png",
|
||||
"selectedIconPath": "static/tabbar/4-1.png",
|
||||
|
||||
@@ -1,639 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
|
||||
:iconshow='false'></navseat>
|
||||
<view class="search flex-between">
|
||||
<view class="searchinput flex-between">
|
||||
<input type="text" class="searchinput_input" placeholder-style="color:#FFFFFF" @input="onInput"
|
||||
v-model="keyWord" placeholder="搜索" />
|
||||
<u-icon name="search" @click="init_fn" color="#fff" size="48"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" id="demo" style="width:100%;" :style="{'height':Height}" @scroll="handleScroll"
|
||||
show-scrollbar="false" @scrolltolower="lower">
|
||||
<view class="contentclass">
|
||||
<view class="contentclassbox">
|
||||
<view class="contentclassboxitem flex-between" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentclassboxleft flex-start">
|
||||
<view class="onecontentclassboxleft flex-colum-start">
|
||||
<text class="onecontentclassboxleft_one">{{item.name}}</text>
|
||||
<text class="onecontentclassboxleft_tow">{{item.originSinger}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentclassboxright" @click="clicshowpopupk(item)">
|
||||
点歌
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <image style="margin:100rpx auto 32rpx auto;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/nomore.png" v-if="is_end"
|
||||
mode="aspectFill"></image> -->
|
||||
|
||||
<u-loadmore :status="form.status" loadmore-text="上滑加载更多" @loadmore="loadmorelang" fontSize="28"
|
||||
color="#999" iconSize="28" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="positionfixed">
|
||||
<view class="positionfixedimage flex-colum">
|
||||
<image class="positionfixedimage_image"
|
||||
:src="songimg?songimg:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/mei.png'"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="positionfixedbox flex-between">
|
||||
<view class="positionfixedbox_item flex-colum">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yue.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="positionfixedbox_itemtexto">
|
||||
<u-notice-bar style="width: 100rpx;" :text="songName" :iconshow='false'
|
||||
color='rgba(255, 255, 255, 0.73)' speed='40' fontSize='24'
|
||||
bgColor='transparent'></u-notice-bar>
|
||||
<!-- <text class="">{{songName || '暂无人点歌,快来...'}}</text> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="positionfixedbox_item flex-colum" @click="clickrecord">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/yidian.png"
|
||||
mode="aspectFill"></image>
|
||||
<text>已点</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="showpopup = false" mode="center" :round="24" bgColor="transparent">
|
||||
<view class="contentu-popup">
|
||||
<view class="contentuPopupOne">
|
||||
点歌
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
点歌人昵称:
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="fromName" placeholder="您的称呼" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
你想点给谁:
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="toName" placeholder="TA的称呼" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentuPopupitem flex-between">
|
||||
<view class="contentuPopupitemone">
|
||||
您的祝福语:
|
||||
</view>
|
||||
<view class="contentuPopupiteminput">
|
||||
<input type="text" v-model="note" placeholder=" " />
|
||||
</view>
|
||||
<!-- <view class="contentuPopupiteminput">
|
||||
<u--textarea style="font-size: 24rpx;" v-model="note" placeholder=" "></u--textarea>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="contentupopupboutton flex-between">
|
||||
<view class="contentupopupbouttonO" @click="showpopup = false">
|
||||
取消
|
||||
</view>
|
||||
<view class="contentupopupbouttonT" @tap="$u.debounce(clickervicesongpost, 500)">
|
||||
立刻支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Height: '',
|
||||
songId: '',
|
||||
fromName: '',
|
||||
toName: '',
|
||||
note: '',
|
||||
showpopup: false,
|
||||
list: [],
|
||||
is_end: false,
|
||||
keyWord: '',
|
||||
form: {
|
||||
page: 1,
|
||||
size: 12,
|
||||
status: 'loadmore',
|
||||
},
|
||||
shopId: "11",
|
||||
songName: '', //正在播放歌曲名字
|
||||
songimg: '',
|
||||
timer: null //定时器
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
// 隐藏首页按钮
|
||||
if (e.q) {
|
||||
this.shopId = this.getQueryString(decodeURIComponent(e.q), 'shopId')
|
||||
}
|
||||
uni.hideHomeButton();
|
||||
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
onShow() {
|
||||
if (!uni.cache.get('miniAppOpenId')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
let res = await this.api.businessopenId({
|
||||
code: data.code, //临时登录凭证
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res)
|
||||
uni.cache.set('miniAppOpenId', res.data)
|
||||
this.init_fn()
|
||||
// uni.cache.set('userInfo', res.data.userInfo);
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.init_fn()
|
||||
}
|
||||
this.createTimer() //单独每20秒请求一次
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// onReachBottom() {
|
||||
// this.cashierService()
|
||||
// },
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleScroll(e) {
|
||||
console.log(e.detail.scrollTop)
|
||||
},
|
||||
lower() {
|
||||
console.log('触底加载')
|
||||
this.cashierService()
|
||||
},
|
||||
createTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.apisongsinging()
|
||||
}, 20000)
|
||||
},
|
||||
async apisongsinging() { //查看现在是否有人点歌
|
||||
let {
|
||||
data
|
||||
} = await this.api.songsinging()
|
||||
console.log(data)
|
||||
this.songName = data.songName ? data.songName : '暂无人点歌,快来...'
|
||||
this.songimg = data.img
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onInput(e) {
|
||||
this.handleClick();
|
||||
},
|
||||
handleClick: _.debounce(function() {
|
||||
this.init_fn();
|
||||
// 函数执行内容
|
||||
}, 600),
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.size = 12
|
||||
this.form.status = 'loadmore'
|
||||
this.cashierService()
|
||||
this.apisongsinging()
|
||||
},
|
||||
// 列表
|
||||
async cashierService() {
|
||||
let res = await this.api.cashierServicesong({
|
||||
keyWord: this.keyWord,
|
||||
size: this.form.size,
|
||||
page: this.form.page,
|
||||
shopId: this.shopId,
|
||||
})
|
||||
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||
this.list = []
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
if (this.form.page == 1) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
}
|
||||
if (this.form.page > res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 唤起弹框
|
||||
clicshowpopupk(item) {
|
||||
this.fromName = ''
|
||||
this.toName = ''
|
||||
this.note = ''
|
||||
this.showpopup = true
|
||||
this.songId = item.id
|
||||
},
|
||||
async clickervicesongpost(item) {
|
||||
let res = await this.api.cashierServicesongpost({
|
||||
songId: this.songId,
|
||||
fromName: this.fromName,
|
||||
toName: this.toName,
|
||||
note: this.note,
|
||||
shopId: this.shopId,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
this.showpopup = false
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.hideLoading()
|
||||
uni.navigateTo({
|
||||
url: '/pages/chooseasong/record?shopId=' + this.shopId
|
||||
})
|
||||
// uni.switchTab({
|
||||
// url: '/pages/order/order'
|
||||
// });
|
||||
}, 1000)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
setTimeout(res => {
|
||||
this.showpopup = false
|
||||
uni.hideLoading()
|
||||
// uni.switchTab({
|
||||
// url: '/pages/order/order'
|
||||
// });
|
||||
}, 500)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
var screenHeight = data.safeArea.height
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('#demo').boundingClientRect(res => {
|
||||
console.log(res)
|
||||
this.Height = screenHeight - res.top - 10 + 'px'
|
||||
}).exec();
|
||||
this.$u.getRect('.contentclass').then(res => {
|
||||
console.log(res, 111)
|
||||
// this.Height = screenHeight - res.top + 'px'
|
||||
// console.log(this.Height)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
clickrecord() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chooseasong/record?shopId=' + this.shopId
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// page {
|
||||
|
||||
// }
|
||||
:deep(.u-notice__left-icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
|
||||
padding: 12rpx 28rpx;
|
||||
|
||||
.searchinput {
|
||||
padding: 0rpx 32rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
||||
|
||||
.searchinput_input {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
flex: auto;
|
||||
|
||||
}
|
||||
|
||||
.searchinputu-icon {
|
||||
background: #000;
|
||||
padding: 10rpx 24rpx;
|
||||
background: #333333;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.searchimage {
|
||||
margin-left: 40rpx;
|
||||
width: 45.25rpx;
|
||||
height: 50.12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contentclass {
|
||||
padding: 0rpx 28rpx 215rpx 28rpx;
|
||||
overflow: auto;
|
||||
|
||||
.contentclassbox {
|
||||
width: 100%;
|
||||
padding: 12rpx 24rpx;
|
||||
// background: #FFFFFF;
|
||||
|
||||
.contentclassboxitem {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.contentclassboxleft {
|
||||
.contentclassboxleftimage {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.onecontentclassboxleft {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.onecontentclassboxleft_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontentclassboxleft_tow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentclassboxright {
|
||||
padding: 8rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #FFF6FF;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
border: 2rpx solid #FCF4FF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
width: 95%;
|
||||
height: 166rpx;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
padding: 0 16rpx;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
// .positionfixedimage::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// width: 50px;
|
||||
// height: 50px;
|
||||
// top: 100rpx;
|
||||
// left: -50px;
|
||||
// background: radial-gradient(circle at 0 0, transparent 50px, rgba(129, 125, 207, 0.2) 50px);
|
||||
// backdrop-filter: blur(20px);
|
||||
// }
|
||||
|
||||
// .positionfixedimage::after {
|
||||
// content: "";
|
||||
// width: 180%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, 0);
|
||||
// top: 0;
|
||||
// z-index: -1;
|
||||
// content: '';
|
||||
// border-radius: 0 0 50% 50%; //顶部圆弧,底部圆弧: 0 0 50% 50%
|
||||
// background: #000000;
|
||||
// }
|
||||
|
||||
.positionfixedimage {
|
||||
position: absolute;
|
||||
top: -70rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: #000000;
|
||||
z-index: 9;
|
||||
|
||||
.positionfixedimage_image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
animation: rotate 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
/* 动画开始时旋转0度 */
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
/* 动画结束时旋转360度 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixedbox {
|
||||
padding: 44rpx 74rpx 42rpx 74rpx;
|
||||
|
||||
.positionfixedbox_item {
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
text {
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.positionfixedbox_itemtexto {
|
||||
width: 100rpx;
|
||||
padding: 0 0;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
// animation: aniMove 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes aniMove {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentu-popup {
|
||||
width: 694rpx;
|
||||
padding: 32rpx 24rpx 32rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.contentuPopupOne {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contentuPopupitem {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.contentuPopupitemone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentuPopupiteminput {
|
||||
margin-left: 16rpx;
|
||||
flex: auto;
|
||||
padding-bottom: 8rpx;
|
||||
border-bottom: 2rpx solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
input {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentupopupboutton {
|
||||
padding: 50rpx 70rpx 0 70rpx;
|
||||
|
||||
.contentupopupbouttonO {
|
||||
width: 196rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contentupopupbouttonT {
|
||||
width: 196rpx;
|
||||
height: 56rpx;
|
||||
background: linear-gradient(180deg, #8864EB 0%, #B349CC 100%);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
line-height: 56rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,264 +0,0 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='false' :title='"点单记录"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
|
||||
iconcolor="#fff" @Topdistance='Topdistance'>
|
||||
</navseat>
|
||||
<view class="content" :style="{'height':Height}">
|
||||
<scroll-view scroll-y="true" style="width:100%;" :style="{'height':Height}" show-scrollbar="false"
|
||||
@scrolltolower="lower">
|
||||
<view class="scrollview" :style="{'height':Height}">
|
||||
<view class="contentbox" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentboxtop flex-between">
|
||||
<text class="contentboxtopname">{{item.name}}</text>
|
||||
<text v-if="item.state == '-1'" class="contentboxtopname_weizhifu">未支付</text>
|
||||
<text v-if="item.state == '0'">已取消</text>
|
||||
<view class="contentboxtopone" v-if="item.state == '1'">
|
||||
<text class="contentboxtopone_one">前面还有{{item.preCount}}首</text>
|
||||
<text class="contentboxtopone_tow">已支付</text>
|
||||
</view>
|
||||
<text class="contentboxtopnametow" v-if="item.state == '2'">演唱中</text>
|
||||
<text class="contentboxtopnametowthere" v-if="item.state == '3'">已演唱</text>
|
||||
</view>
|
||||
<view class="contentboxtopO">
|
||||
¥{{item.price}}
|
||||
</view>
|
||||
<view class="contentboxtopT">
|
||||
下单时间:{{$u.timeFormat(item.create_time,'yyyy-mm-dd hh:MM') || '无'}}
|
||||
</view>
|
||||
<image class="contentboxafter" src="" mode=""></image>
|
||||
</view>
|
||||
<!-- <image style="margin:100rpx auto 32rpx auto;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/nomore.png" v-if="is_end"
|
||||
mode="aspectFill"></image> -->
|
||||
<view style="padding: 32rpx 0;">
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Height: '',
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
shopId: '10'
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopId = e.shopId
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
// this.Topdistance()
|
||||
}, 500)
|
||||
},
|
||||
onShow() {
|
||||
this.cashierService()
|
||||
},
|
||||
methods: {
|
||||
Topdistance(res) {
|
||||
// console.log(res,111)
|
||||
var resdata = res
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.Height = data.screenHeight - 32 - resdata + 'px'
|
||||
// console.log(this.Height)
|
||||
// console.log(this.Height)
|
||||
}
|
||||
})
|
||||
},
|
||||
lower() {
|
||||
console.log('触底加载')
|
||||
this.cashierService()
|
||||
},
|
||||
async cashierService() {
|
||||
let res = await this.api.cashierServicerecord({
|
||||
size: this.form.size,
|
||||
page: this.form.page,
|
||||
state: '', //-1 未支付 0 已取消 1 已支付 2 演唱中 3 已演唱
|
||||
shopId: this.shopId
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||
this.list = []
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
if (this.form.page == 1) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
}
|
||||
this.form.status = 'loading';
|
||||
if (this.form.page > res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
console.log(data)
|
||||
this.$u.getRect('.content').then(res => {
|
||||
console.log(res, 111)
|
||||
this.Height = data.safeArea.height - 32 + 'px'
|
||||
// console.log(this.Height)
|
||||
})
|
||||
// console.log(this.Height)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/background.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
padding: 32rpx 28rpx 0rpx 28rpx;
|
||||
overflow: auto;
|
||||
|
||||
.scrollview {
|
||||
overflow: auto;
|
||||
|
||||
.contentbox:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
position: relative;
|
||||
margin-top: 48rpx;
|
||||
width: 100%;
|
||||
background: rgba(129, 125, 207, 0.2);
|
||||
border: 2px solid #828282;
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
|
||||
.contentboxafter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 482rpx;
|
||||
height: 14rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/chooseasong/dibuyin.png);
|
||||
background-size: 100% 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.contentboxtop {
|
||||
padding: 16rpx 24rpx;
|
||||
border-bottom: 2rpx solid #F6F6F6;
|
||||
|
||||
.contentboxtopname {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contentboxtopone {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.contentboxtopone_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #F9DDF9;
|
||||
}
|
||||
|
||||
.contentboxtopone_tow {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #32AA52;
|
||||
text-shadow: 0px 6px 6px rgba(50, 170, 82, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtopnametow {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FF9C39;
|
||||
text-shadow: 0px 4px 4px rgba(255, 156, 57, 0.37);
|
||||
}
|
||||
|
||||
.contentboxtopname_weizhifu {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
|
||||
}
|
||||
|
||||
.contentboxtopnametowthere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 4px 4px rgba(255, 255, 255, 0.37);
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtopO {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.contentboxtopT {
|
||||
padding: 0rpx 24rpx 32rpx 24rpx;
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/Meituanquan.png"
|
||||
style="width: 39.46rpx;height: 40rpx;" mode=""></image>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
{{info.expDate}}
|
||||
</view>
|
||||
<button v-if="info.refundAble=='1'" class="buttonStyle" @click="makephone(info.phone)">申请退款</button>
|
||||
<view style="height: 2rpx;width: 100%;background-color: #EFEFEF;margin-top: 16rpx;"> </view>
|
||||
<view class="rightStyle" v-for="(item,i) in info.coupons">
|
||||
<text :class="[item.isRefund==1?'tdl':'' ]">
|
||||
{{item.couponNo}}
|
||||
</text>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/QRcode.png" v-if="info.status=='unused'"
|
||||
style="width: 39.46rpx;height: 40rpx;margin-right: 50rpx;" mode="" @click="openQR"></image>
|
||||
<text v-else>已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
makephone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
// uni.pro.navigateTo('group_order/refund',{})
|
||||
},
|
||||
openQR() {
|
||||
this.$emit('clickEvent')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.buttonStyle {
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
top: 56rpx;
|
||||
width: 180rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.rightStyle {
|
||||
.df(space-between);
|
||||
margin-top: 16rpx;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
|
||||
.tdl {
|
||||
color: #999;
|
||||
text-decoration: line-through
|
||||
}
|
||||
</style>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/shangdian.png"
|
||||
style="width: 40rpx;height: 36.44rpx;" mode=""></image>
|
||||
<text>商家信息</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
{{info.shopName}}
|
||||
</view>
|
||||
<view class="addreeStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dingwei.png"
|
||||
style="width: 17.9rpx;height: 22rpx;margin-right: 6rpx;" mode=""></image>{{info.distances}} |
|
||||
{{info.address}}
|
||||
</view>
|
||||
<view class="rightStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dianhua.png" @click="makephone(info.phone)"
|
||||
style="width: 39.46rpx;height: 40rpx;margin-right: 50rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
makephone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.buttonStyle {
|
||||
width: 158rpx;
|
||||
height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
top: 56rpx;
|
||||
}
|
||||
|
||||
.addreeStyle {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 22rpx;
|
||||
.df;
|
||||
}
|
||||
|
||||
.rightStyle {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 126rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/sfmoney.png"
|
||||
style="width: 28.29rpx;height: 31.93rpx;" mode=""></image>
|
||||
<text>订单信息</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>订</text> <text>单</text> <text>号:</text>
|
||||
</view>
|
||||
<text>{{info.orderNo}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>手</text> <text>机</text> <text>号:</text>
|
||||
</view>
|
||||
<text>{{info.phone}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>付</text> <text>款</text> <text>时</text> <text>间:</text>
|
||||
</view>
|
||||
<text>{{info.payTime==null?'':info.payTime}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>数</text> <text>量:</text>
|
||||
</view>
|
||||
<text>{{info.number}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>总</text> <text>价:</text>
|
||||
</view>
|
||||
<text>{{info.orderAmount}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>优</text> <text>惠</text> <text>明</text> <text>细:</text>
|
||||
</view>
|
||||
<text style="color: #FF4C11;">{{info.saveAmount}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>待</text><text>支</text> <text>付:</text>
|
||||
</view>
|
||||
<text>{{info.payAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.df(flex-start, stretch);
|
||||
margin-top: 16rpx;
|
||||
margin-left: 40rpx;
|
||||
|
||||
>view {
|
||||
>text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-right: 50rpx;
|
||||
width: 120rpx;
|
||||
.df(space-between)
|
||||
}
|
||||
|
||||
>text {
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/sfmoney.png"
|
||||
style="width: 28.29rpx;height: 31.93rpx;" mode=""></image>
|
||||
<text>实付金额</text>
|
||||
<text>¥{{info.payAmount}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>订</text> <text>单</text> <text>号:</text>
|
||||
</view>
|
||||
<text>{{info.orderNo}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>手</text> <text>机</text> <text>号:</text>
|
||||
</view>
|
||||
<text>{{info.phone}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>付</text> <text>款</text> <text>时</text> <text>间:</text>
|
||||
</view>
|
||||
<text>{{info.payTime}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>数</text> <text>量:</text>
|
||||
</view>
|
||||
<text>{{info.number}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>总</text> <text>价:</text>
|
||||
</view>
|
||||
<text>{{info.orderAmount}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text>实</text> <text>付:</text>
|
||||
</view>
|
||||
<text>{{info.payAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.df(flex-start, stretch);
|
||||
margin-top: 16rpx;
|
||||
margin-left: 40rpx;
|
||||
>view {
|
||||
>text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-right: 50rpx;
|
||||
width: 120rpx;
|
||||
.df(space-between)
|
||||
}
|
||||
|
||||
>text {
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dengpao.png"
|
||||
style="width: 33.19rpx;height: 43.92rpx;" mode=""></image>
|
||||
<text>温馨提示</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
有效期:
|
||||
</view>
|
||||
<text>{{info.notice.dateUsed}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
使用时间:
|
||||
</view>
|
||||
<text>{{info.notice.availableTime}}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
使用规则:
|
||||
</view>
|
||||
<text>{{info.notice.invoiceInfo}}</text>
|
||||
</view>
|
||||
<view @click="clickEvent" class="lookstyle" v-if="islook">
|
||||
查看更多<u-icon name="arrow-down" color="#575B66" size="28"></u-icon>
|
||||
</view>
|
||||
<view class="More" v-else>
|
||||
<u-parse :content="info.notice.usageRules"></u-parse>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {
|
||||
islook: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
this.islook = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.df(flex-start, stretch);
|
||||
margin-top: 16rpx;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
>text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.More {
|
||||
margin-left: 119rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
|
||||
.buttonStyle {
|
||||
width: 158rpx;
|
||||
height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
top: 56rpx;
|
||||
}
|
||||
|
||||
.addreeStyle {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 22rpx;
|
||||
.df;
|
||||
}
|
||||
|
||||
.rightStyle {
|
||||
margin-top: 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
.df(space-between);
|
||||
|
||||
>view>text {
|
||||
margin-left: 8rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lookstyle {
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.df(center);
|
||||
}
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="fontStyle">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/canyin.png"
|
||||
style="width: 40rpx;height: 36.44rpx;" mode=""></image>
|
||||
<text>到店吃套餐</text>
|
||||
</view>
|
||||
<view style="margin-left: 52rpx;" v-for="(item ,i ) in info.tagVos" :key="i">
|
||||
<view class="content">
|
||||
{{item.title}} {{item.goods.length}} 选 {{item.number}}
|
||||
</view>
|
||||
<view class="rightStyle" v-for="(ele,index) in item.goods" :key="index">
|
||||
<view>
|
||||
{{ele.name}} <text>({{ele.groupNum}}{{ele.unitName}})</text>
|
||||
</view>
|
||||
<text>¥{{ele.lowPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
makephone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.Box {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
.df;
|
||||
|
||||
>text {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-left: 12rpx
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.buttonStyle {
|
||||
width: 158rpx;
|
||||
height: 56rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
top: 56rpx;
|
||||
}
|
||||
|
||||
.addreeStyle {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 22rpx;
|
||||
.df;
|
||||
}
|
||||
|
||||
.rightStyle {
|
||||
margin-top: 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
.df(space-between);
|
||||
|
||||
>view>text {
|
||||
margin-left: 8rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<view class="title">
|
||||
<text class="fontStyle">{{info.proName}}</text>
|
||||
<view class="titleBox">
|
||||
<image :src="info.proImg" mode=""
|
||||
style="width: 102rpx;height: 102rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;"></image>
|
||||
<view class="ml-20 rightText">
|
||||
<view>
|
||||
{{info.avaTime}}
|
||||
</view>
|
||||
<view style="margin-top: 8rpx;">{{info.proDetail}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="moneyStyle" @click="fivecontentclick(info.proId)">
|
||||
<text class="moneys">¥{{info.orderAmount}}</text>
|
||||
<u-icon name="arrow-right" color="#000" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['info'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fivecontentclick(proId) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id: proId
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.title {
|
||||
width: 750rpx;
|
||||
height: 206rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 64rpx;
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.fontStyle {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.titleBox {
|
||||
.df();
|
||||
|
||||
.rightText {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.moneyStyle {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
.df();
|
||||
|
||||
.moneys {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
justify-content: @start;
|
||||
align-items: @position;
|
||||
}
|
||||
</style>
|
||||
@@ -1,207 +0,0 @@
|
||||
<template>
|
||||
<!-- 团购订单详情 -->
|
||||
<view>
|
||||
<!-- 头部 -->
|
||||
<groupTitle :info="listinfo"></groupTitle>
|
||||
<!-- 券
|
||||
if (e == 'closed') return '已完成'
|
||||
else if (e == 'unpaid') return '待付款'
|
||||
else if (e == 'unused') return '待使用'
|
||||
else if (e == 'refund') return '已退款'
|
||||
else if (e == 'cancelled') return '已取消'
|
||||
else return "1"
|
||||
-->
|
||||
<groupCoupons :info="listinfo" @clickEvent='clickEvent'
|
||||
v-if="listinfo.status=='unused'||listinfo.status=='refund'"></groupCoupons>
|
||||
<!-- 商家信息 -->
|
||||
<groupMerchants :info="listinfo"></groupMerchants>
|
||||
<!-- 到店 -->
|
||||
<groupStore :info="listinfo"></groupStore>
|
||||
<!-- 提示 -->
|
||||
<groupPrompt :info="listinfo"></groupPrompt>
|
||||
<!-- 实付 -->
|
||||
<groupPay :info="listinfo" v-if="listinfo.status=='unused'||listinfo.status=='refund'"></groupPay>
|
||||
<!-- 订单信息 -->
|
||||
<groupOrderInfo :info="listinfo" v-else></groupOrderInfo>
|
||||
<view class="customerService" @click="makephone(listinfo.phone)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/kefu.png"
|
||||
style="width: 40rpx;height: 43.21rpx;" mode=""></image>
|
||||
联系客服
|
||||
</view>
|
||||
|
||||
<view style="height: 100rpx;" v-if="listinfo.status == 'unpaid'"> </view>
|
||||
<!-- 待支付按钮 -->
|
||||
<view class="payBox" v-if="listinfo.status == 'unpaid'">
|
||||
<button @click="payEvent" class="payStyle">立即支付</button>
|
||||
</view>
|
||||
<!-- 二维码展示 -->
|
||||
<view class="qrimg" v-if="isQrimg" @click="clickEvent">
|
||||
<tki-qrcode ref="qrcode" size="400" :val="qrValue" :loadMake="true" @result="qrR" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 只有两个有变动,美团券和实付金额、订单信息
|
||||
* 1.支付完成/已退款/有美团券、
|
||||
* 待支付/已完成没有美团券
|
||||
* 2.支付完成、已退款有实付金额
|
||||
* 待支付、已完成有订单信息没有实付金额
|
||||
**/
|
||||
import groupTitle from './components/groupTitle.vue'
|
||||
import groupCoupons from './components/groupCoupons.vue'
|
||||
import groupMerchants from './components/groupMerchants.vue'
|
||||
import groupStore from './components/groupStore.vue'
|
||||
import groupPrompt from './components/groupPrompt.vue'
|
||||
import groupPay from './components/groupPay.vue'
|
||||
import groupOrderInfo from './components/groupOrderInfo.vue'
|
||||
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
||||
export default {
|
||||
components: {
|
||||
groupTitle,
|
||||
groupCoupons,
|
||||
groupMerchants,
|
||||
groupStore,
|
||||
groupPrompt,
|
||||
groupPay,
|
||||
tkiQrcode,
|
||||
groupOrderInfo
|
||||
},
|
||||
onLoad(e) {
|
||||
this.orderId = e.orderId
|
||||
this.orderorderInfo()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderId: "",
|
||||
listinfo: null,
|
||||
isQrimg: false,
|
||||
qrValue: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async payEvent() {
|
||||
let res = await this.api.payOrderPay({
|
||||
payType: 'wechatPay',
|
||||
orderId: this.listinfo.id,
|
||||
orderType: 'group'
|
||||
})
|
||||
if (res) {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
clickEvent() {
|
||||
this.qrValue =this.listinfo.coupons[0].couponNo
|
||||
console.log(this.listinfo.coupons[0].couponNo)
|
||||
// this.qrValue = this.qrEvent()
|
||||
this.isQrimg = !this.isQrimg
|
||||
},
|
||||
qrR(e) {
|
||||
console.log(112312)
|
||||
},
|
||||
// 拼接code值
|
||||
qrEvent() {
|
||||
let str = ''
|
||||
this.listinfo.coupons.forEach(res => {
|
||||
if (res.couponNo) {
|
||||
str += res.couponNo + ','
|
||||
}
|
||||
})
|
||||
return str
|
||||
},
|
||||
orderorderInfo() {
|
||||
let _this = this
|
||||
uni.getStorage({
|
||||
key: "getLocationstorage",
|
||||
success: async function(data) {
|
||||
let {
|
||||
lat,
|
||||
lng
|
||||
} = data.data
|
||||
let res = await _this.api.groupOrderInfoDetail({
|
||||
id: _this.orderId,
|
||||
lat,
|
||||
lng
|
||||
})
|
||||
if (res.code == 0) {
|
||||
_this.listinfo = res.data
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
makephone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qrimg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.payBox {
|
||||
width: 100vw;
|
||||
height: 140rpx;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
|
||||
|
||||
.payStyle {
|
||||
background-color: #fe7620;
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
border: 10rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.customerService {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
width: 100%;
|
||||
padding: 78rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,323 +0,0 @@
|
||||
<template>
|
||||
<!-- 退款 -->
|
||||
<view class="refund">
|
||||
<view class="refundBox">
|
||||
<view class="refundBoxA">
|
||||
<image src="../../static/avatar.png"
|
||||
style="width: 86rpx;height: 86rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;" mode=""></image>
|
||||
<view>
|
||||
【辣与不辣随心选】汉堡3选1MT19
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 18rpx;"> </view>
|
||||
<view class="refundBoxB">
|
||||
<view>
|
||||
退款数量
|
||||
</view>
|
||||
<view>
|
||||
最多可退1张
|
||||
</view>
|
||||
<!-- 计步器 -->
|
||||
<u-number-box class="Unumber" v-model="Unumbervalue" style="position: absolute;right: 20rpx;"
|
||||
:disabled="true"></u-number-box>
|
||||
</view>
|
||||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||||
<view class="refundBoxC">
|
||||
<view>
|
||||
退款金额
|
||||
</view>
|
||||
<view>
|
||||
1-3 个工作日退还至原支付方,以实际退款金额为准
|
||||
</view>
|
||||
<view>$9.9</view>
|
||||
</view>
|
||||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||||
<view class="refundBoxD">
|
||||
<view>退款原因 <text style="color: #FF4C11;">*</text> </view>
|
||||
<view class="as-input" @click="openFood">
|
||||
<view class="placeholder" v-if="fruitName==undefined||fruitName==''">请至少选择一项</view>
|
||||
<view class="as-content" v-else>{{fruitName}}</view>
|
||||
<!-- <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons> -->
|
||||
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||||
<view class="refundBoxE">
|
||||
<view>退款说明 </view>
|
||||
<textarea placeholder-style="font-size: 24rpx;color: #999999;" @input="sumfontnum" :value='tareaValue'
|
||||
placeholder="请输入退款说明,我们将用心倾听你的任何不满" name="" id="" maxlength="200" cols="30" rows="10"
|
||||
style="padding: 16rpx 26rpx;margin-top: 16rpx;border: solid 2rpx #999;border-radius: 18rpx 18rpx 18rpx 18rpx;"></textarea>
|
||||
<view class="Unumberxz"><text>{{fontNum}}</text>/200</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buttonBox">
|
||||
<button class="buttonStyle">
|
||||
提交订单
|
||||
</button>
|
||||
</view>
|
||||
<niceui-popup-select ref="showFruit" :columns="foods" :selectValue="fruitId" :is-search="false"
|
||||
:option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Unumbervalue: 1,
|
||||
tareaValue: '',
|
||||
fontNum: 0,
|
||||
foods: [{
|
||||
id: '1',
|
||||
name: '计划有变没时间消费'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '买多了/买错了'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '担心安全问题(天气等)'
|
||||
}, {
|
||||
id: '3',
|
||||
name: '担心安全问题(天气等)'
|
||||
}, {
|
||||
id: '3',
|
||||
name: '担心安全问题(天气等)'
|
||||
}, {
|
||||
id: '3',
|
||||
name: '担心安全问题(天气等)'
|
||||
}, {
|
||||
id: '3',
|
||||
name: '担心安全问题(天气等)'
|
||||
},
|
||||
],
|
||||
fruitId: [],
|
||||
fruitName:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 限制文本框字数
|
||||
sumfontnum(e) {
|
||||
console.log(e)
|
||||
this.fontNum = e.detail.value.length
|
||||
},
|
||||
confirmFruit(value, data) {
|
||||
this.fruitId = value
|
||||
this.fruitName = data.map(it => it.name)
|
||||
this.$refs.showFruit.closePopup()
|
||||
},
|
||||
|
||||
openFood() {
|
||||
this.$refs.showFruit.showPopup()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.refundBox {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 64rpx;
|
||||
|
||||
.refundBoxA {
|
||||
.df(flex-start, stretch);
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.refundBoxB {
|
||||
position: relative;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.Unumber {
|
||||
|
||||
// transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.refundBoxC {
|
||||
position: relative;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
}
|
||||
|
||||
.refundBoxD {
|
||||
.df(space-between);
|
||||
// margin-top: 32rpx;
|
||||
padding-top: 32rpx;
|
||||
|
||||
>view:first-child {
|
||||
.df;
|
||||
width: 160rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
// .df();
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.refundBoxE {
|
||||
margin-top: 32rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
|
||||
.Unumberxz {
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
bottom: 14rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
>text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonBox {
|
||||
width: 100%;
|
||||
height: 136rpx;
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// .df(center,center);
|
||||
|
||||
.buttonStyle {
|
||||
margin-left: 50%;
|
||||
margin-top: 40rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 712rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
// @start: flex-start(默认) space-between(两端对齐) space-around(间隔相等)
|
||||
// @position:stretch(默认) center(垂直居中)
|
||||
display: flex;
|
||||
align-items: @position;
|
||||
justify-content: @start;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/deep/ .u-number-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
radio-group,
|
||||
checkbox-group {
|
||||
width: 92%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #f7f7f7;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
|
||||
.uni-title {
|
||||
font-size: 33rpx;
|
||||
font-weight: bold;
|
||||
padding: 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.uni-list-cell {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 20rpx;
|
||||
|
||||
.uni-list-cell-left {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-list-cell-db {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.as-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.customer-icon {
|
||||
padding: 0 0 0 5rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 33rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.as-content {
|
||||
color: #333;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<view class="onecontent flex-between">
|
||||
<view class="onecontentleft">
|
||||
现有<text style="color: #FC851E;font-size: 24rpx;">
|
||||
{{bannervo.coupons==null?116:bannervo.coupons}}人
|
||||
</text>
|
||||
已免单
|
||||
</view>
|
||||
<view class="onecontentright flex-start">
|
||||
<view class="onecontentrightimage">
|
||||
<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}">
|
||||
<view class="children">
|
||||
<image class="pic" :src="item.logo"></image>
|
||||
</view>
|
||||
</view>
|
||||
</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">
|
||||
{{item.name}}已省{{item.money}}元钱
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<view class="after"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import customSwiper from '@/components/blackmonth-swiper/index'
|
||||
export default {
|
||||
components: {
|
||||
customSwiper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScroll: false,
|
||||
minCount: 0,
|
||||
fontColor: 'black',
|
||||
timersetInterval: '0', //定时器
|
||||
slideNote: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
screenWidth: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
bannervo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
counponsInfo: []
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
timersetnteritem: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timersetnteritem(newVal, oldVal) {
|
||||
// console.log(newVal, oldVal)
|
||||
if (newVal == 1) {
|
||||
clearTimeout(this.timersetInterval);
|
||||
this.timersetInterval = null;
|
||||
} else {
|
||||
this.timersetIntervalnewVal()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.timersetIntervalnewVal()
|
||||
},
|
||||
methods: {
|
||||
timersetIntervalnewVal() {
|
||||
this.timersetInterval = setInterval(() => {
|
||||
this.endMove()
|
||||
}, 2000);
|
||||
},
|
||||
startMove(e) {
|
||||
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
||||
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
||||
},
|
||||
endMove(e) {
|
||||
// this.itemStyless = []
|
||||
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
||||
// console.log(newList)
|
||||
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
||||
// 向左滑动
|
||||
var last = [newList.pop()]
|
||||
newList = last.concat(newList)
|
||||
// } else {
|
||||
// 向右滑动
|
||||
// newList.push(newList[0])
|
||||
// newList.splice(0, 1)
|
||||
// }
|
||||
this.$emit('changeValue', newList);
|
||||
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.onecontent {
|
||||
position: relative;
|
||||
margin-top: -34rpx;
|
||||
padding: 14rpx 28rpx 44rpx 28rpx;
|
||||
width: 100%;
|
||||
background: linear-gradient(92deg, #FCECAA 0%, #fff 100%);
|
||||
border-radius: 40rpx 0rpx 0rpx 0rpx;
|
||||
|
||||
.onecontentleft {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 700;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
color: #FC851E;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.onecontentright {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.onecontentrightimage {
|
||||
width: 65rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 28rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
.swiperPanel {
|
||||
height: 28rpx;
|
||||
width: 100rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.swiperItem {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all .5s;
|
||||
|
||||
/* 定义一个动画关键帧 */
|
||||
|
||||
|
||||
.children {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
// margin: 2rpx auto;
|
||||
|
||||
|
||||
/* 应用动画,设置动画时长、循环次数和速度曲线 */
|
||||
.pic {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 10px #333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentrightimageabsolute {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.onecontentrightimageabsolutetow {
|
||||
width: 100%;
|
||||
left: 14rpx;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// .onecontentrightswiper {
|
||||
// border: 50%;
|
||||
// width: 28rpx;
|
||||
// height: 28rpx;
|
||||
// background: red;
|
||||
// }
|
||||
}
|
||||
|
||||
.onecontentrighttext {
|
||||
width: 232rpx;
|
||||
|
||||
.swiper {
|
||||
height: 28rpx;
|
||||
// width: 232rpx;
|
||||
|
||||
.swiperitem {
|
||||
width: 100rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<view class="fourcontent flex-between">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in menu" :key="index"
|
||||
@click="viewHistorycategoryss(item,index)"
|
||||
:class="!item.isChild && viewHistoryindex == index ? 'fourcontent_itemactev':''">
|
||||
<text>{{item.name}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
viewHistoryindex: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
viewHistorycategoryss(item, index) {
|
||||
console.log(item, index)
|
||||
uni.$emit('viewHistory', {
|
||||
item:item,
|
||||
index:index
|
||||
});
|
||||
},
|
||||
clickdistrict(item) {
|
||||
switch (item.jumpType) {
|
||||
case 'absolute':
|
||||
uni.pro.navigateTo('webview/webview', {
|
||||
url: item.absUrl
|
||||
});
|
||||
break;
|
||||
case 'relative':
|
||||
uni.pro.navigateTo(item.absUrl, item);
|
||||
break;
|
||||
case 'scan':
|
||||
if (!uni.utils.pluschooseImage()) {
|
||||
return false
|
||||
}
|
||||
// #ifdef H5
|
||||
if (this.wxSdk) {
|
||||
wx.scanQRCode({
|
||||
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
|
||||
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
|
||||
success: res => {
|
||||
// 当needResult 为 1 时,扫码返回的结果
|
||||
console.log(res.resultStr, res)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '微信sdk初始化失败,请重新加载',
|
||||
success: res => {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP || MP-WEIXIN
|
||||
uni.scanCode({
|
||||
success: res => {
|
||||
console.log(res.result, res)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fourcontent {
|
||||
padding: 32rpx 28rpx 32rpx 28rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.fourcontent_item {
|
||||
flex-wrap: nowrap;
|
||||
margin-left: 22rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
text {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent_itemactev {
|
||||
background: #fee06a;
|
||||
}
|
||||
|
||||
.fourcontent_item:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<view class="towcontent flex-between">
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
district: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickdistrict(item) {
|
||||
console.log(item,'调试')
|
||||
switch (item.jumpType) {
|
||||
case 'absolute':
|
||||
uni.pro.navigateTo('webview/webview', {
|
||||
url: item.absUrl
|
||||
});
|
||||
break;
|
||||
case 'scan_applet':
|
||||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||||
break;
|
||||
case 'relative':
|
||||
uni.setStorage({
|
||||
key: 'itemData',
|
||||
data: item,
|
||||
});
|
||||
uni.pro.navigateTo(item.absUrl, item.name);
|
||||
break;
|
||||
case 'scan':
|
||||
if (!uni.utils.pluschooseImage()) {
|
||||
return false
|
||||
}
|
||||
// #ifdef APP || MP-WEIXIN
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
uni.pro.navigateTo('order_food/order_food')
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
break;
|
||||
}
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.towcontent {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
width: 100%;
|
||||
background: #F9F9F9;
|
||||
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.towcontent_item {
|
||||
width: 25%;
|
||||
margin-left: 34rpx;
|
||||
|
||||
image {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent_item:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,309 +0,0 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="fivecontent">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="fivecontent" :style="isFixedTop?`margin-top:${HeighT.heightBar}px`:''">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="fivecontent" :class="{statusbarmargin:isFixedTop}">
|
||||
<!-- #endif -->
|
||||
<view class="fivecontent_item" v-for="(item,index) in 12" :key="index">
|
||||
<view class="fivecontent_item_nav flex-start">
|
||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<view class="fivecontent_item_nav_left">
|
||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||
<view>
|
||||
幸运咖啡(荣民时代广场店)
|
||||
</view>
|
||||
<view>
|
||||
龙首.151m
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_nav_leftlang flex-start">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
||||
mode="aspectFill"></image>
|
||||
<text>人气连锁品牌</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_box">
|
||||
<view class="fivecontent_item_boxitem flex-between">
|
||||
<image src="@/static/avatar.png" mode=""></image>
|
||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||
<view>全场饮品任选</view>
|
||||
<text>已抢15789份</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefttow flex-start">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
||||
mode="aspectFill"></image>
|
||||
<text>人气连锁品牌</text>
|
||||
</view>
|
||||
<view class="indexboxitemleftthere flex-colum-start">
|
||||
<view class="indexboxitemleftthereabsolute">
|
||||
马上抢
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretext flex-start">
|
||||
<view class="indexboxitemlefttheretextone">
|
||||
<text>¥</text>
|
||||
<text>1444</text>
|
||||
</view>
|
||||
<view class="indexboxitemlefttheretexttow">
|
||||
¥111
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="indexboxitemleftthere_countdown flex-between">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省4元</text>
|
||||
<view class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown :show-day="false" :day="1" :hour="1" :minute="12"
|
||||
:second="40" color="#FFFFFF" border-color="#00B26A"
|
||||
splitorColor="#FFFFFF" :font-size="8"></uni-countdown>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isFixedTop: false, //吸顶是否显示
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
keyword: '',
|
||||
current: 0,
|
||||
opacity: false,
|
||||
};
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 1000)
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
GetTop() {
|
||||
//获取元素距离顶部的距离
|
||||
this.$u.getRect('.fourcontent').then(res => {
|
||||
this.Topdistance = res.top - this.HeighT.heightBar
|
||||
})
|
||||
},
|
||||
viewHistory() {
|
||||
//移动高度=滚动高度 + 距离上面的位置 - 导航条 - 状态栏高度
|
||||
uni.pageScrollTo({
|
||||
scrollTop: this.Topdistance + 1,
|
||||
duration: 300
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fivecontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.fivecontent_item {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
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_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;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere {
|
||||
position: relative;
|
||||
margin-top: 30rpx;
|
||||
padding-left: 16rpx;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
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 {
|
||||
.indexboxitemlefttheretextone {
|
||||
text {
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #FF5053;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemlefttheretexttow {
|
||||
margin-left: 12rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdown {
|
||||
width: 100%;
|
||||
|
||||
.indexboxitemleftthere_countdowntext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.indexboxitemleftthere_countdowntexts {
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
margin-left: 16rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<view class="viewswiper">
|
||||
<u-swiper :list="carousel" keyName="coverImg" @change="e => current = e.current" indicatorStyle="right: 20px" height='484'>
|
||||
<view slot="indicator" class="indicator">
|
||||
<view class="indicator__dot" v-for="(item, index) in carousel" :key="index"
|
||||
:class="[index === current && 'indicator__dot--active']"
|
||||
:style="[index === current && {'width':16+'px'}]">
|
||||
</view>
|
||||
</view>
|
||||
</u-swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
carousel: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.viewswiper {
|
||||
.indicator {
|
||||
margin-bottom: 46rpx;
|
||||
@include flex(row);
|
||||
justify-content: center;
|
||||
|
||||
&__dot {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 0 5px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&--active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-num {
|
||||
padding: 2px 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 100px;
|
||||
width: 35px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<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}}
|
||||
</view>
|
||||
<view class="therecontent_box_imge_right flex-start">
|
||||
<view>
|
||||
{{todayList.date}}
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.todayList"
|
||||
:key="index" @click="clickproduct(item)">
|
||||
<image :src="`${item.image}?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>
|
||||
</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">
|
||||
</image>
|
||||
<view>
|
||||
{{item.discount || '1'}}折
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewthere ">
|
||||
<text>¥{{item.salePrice}}</text>
|
||||
<text>¥{{item.originPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent_box_item">
|
||||
<view class="therecontent_box_imge flex-between"
|
||||
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}}
|
||||
</view>
|
||||
<view class="therecontent_box_imge_right flex-start">
|
||||
<view>
|
||||
{{salesList.date}}
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
<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>
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewtowdiscount flex-around">
|
||||
已抢{{item.realSalesNumber}}份
|
||||
</view>
|
||||
<view class="therecontent_box_itembox_itemviewthere ">
|
||||
<text>¥{{item.salePrice}}</text>
|
||||
<text>¥{{item.originPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
salesList: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
salesList: []
|
||||
}
|
||||
}
|
||||
},
|
||||
todayList: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
todayList: []
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '每日特价'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id: item.id
|
||||
})
|
||||
},
|
||||
jrtoday(e) {
|
||||
if (e == 0) {
|
||||
uni.pro.navigateTo('index/jtoday')
|
||||
} else {
|
||||
uni.pro.navigateTo('index/hotlist')
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.therecontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.therecontent_box_item {
|
||||
width: 336rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #FFFFFF;
|
||||
height: 396rpx;
|
||||
|
||||
.therecontent_box_itembox {
|
||||
padding: 10rpx 18rpx 24rpx 24rpx;
|
||||
|
||||
.therecontent_box_itembox_item {
|
||||
margin-top: 20rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
image {
|
||||
width: 114rpx;
|
||||
height: 136rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_itemview {
|
||||
margin-left: 12rpx;
|
||||
|
||||
.therecontent_box_itembox_itemviewone {
|
||||
width: 168rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
margin-left: 4rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_itemviewoneafter {
|
||||
width: 48rpx;
|
||||
height: 24rpx;
|
||||
line-height: 24rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_itemviewtow {
|
||||
margin-top: 8rpx;
|
||||
width: 60rpx;
|
||||
// padding: 4rpx 10rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #FF7127;
|
||||
|
||||
image {
|
||||
width: 9.74rpx;
|
||||
height: 13.51rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
padding-right: 2rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_itemviewtowdiscount {
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_itemviewthere {
|
||||
// margin-top: 4rpx;
|
||||
// align-items: flex-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: Bold;
|
||||
font-size: 24rpx;
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #999999;
|
||||
text-decoration-line: line-through;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent_box_itembox_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent_box_imge {
|
||||
padding: 24rpx 16rpx 6rpx 24rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box1.png) no-repeat;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background-size: cover;
|
||||
|
||||
.therecontent_box_imge_text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontent_box_imge_right {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
// font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,553 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="containertop">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxone flex-start">
|
||||
<view>可使用红包</view>
|
||||
<text>{{totalnumber}}张</text>
|
||||
</view>
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in list" :key="index"
|
||||
@click="clickiconone(item)">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="item.status == 0?'':'containertopboxitemlefts'">
|
||||
<view class="containertopboxitemleft_one"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_ones'">
|
||||
<text style="font-size: 28rpx;">¥</text>
|
||||
<text>{{item.couponsAmount || 0}}</text>
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_tows'">
|
||||
优惠券(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright">
|
||||
<view class="containertopboxitemright_one">
|
||||
无门槛使用
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
通用红包券
|
||||
</view>
|
||||
<view class="containertopboxitemright_there">
|
||||
有效期至:{{$u.timeFormat(item.endTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
<view
|
||||
:class="item.status == 0?'containertopboxitemright_four':'containertopboxitemright_fours'">
|
||||
<text v-if="orderfood">
|
||||
{{item.status == 0 ? '去使用':'无法使用'}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.status == 0 ? '兑换积分':'已过期'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator url="/pages/user/coupon" hover-class="navigator-hover"
|
||||
style="margin-top: 20rpx;font-weight: 400;font-size: 28rpx;text-align: center; width: 100%;">
|
||||
查看更多
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="containerbottom">
|
||||
<view class="containerbottomtop">
|
||||
<view class="containerbottomtoptopbox flex-start">
|
||||
<view>可购买红包</view>
|
||||
<text>(根据您的订单金额推荐更适合您的优惠力度)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="containerbottombox_bottom">
|
||||
<view class="containerbottombox_bottomone">
|
||||
购买省钱包,本单立减
|
||||
</view>
|
||||
<view v-for="(item,index) in orderlist" :key="index">
|
||||
<view class="containerbottombox_bottomtow">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="containerbottombox_bottombox flex-start" v-for="(item1,index1) in item.listdata"
|
||||
:key="index1" @click="clickicon(item1)">
|
||||
<view class="containerbottombox_bottomthere">
|
||||
<view class="containerbottombox_bottomthere_topitem">
|
||||
<view class="onecontainerbottombox_bottomthere_topitem">
|
||||
<view class="containerbottombox_bottomthere_topitemone">
|
||||
通用红包
|
||||
</view>
|
||||
<view class="containerbottombox_bottomthere_topitemtow flex-center">
|
||||
<view class="a">
|
||||
¥
|
||||
</view>
|
||||
<view class="b">
|
||||
{{item1.couponsAmount}}
|
||||
</view>
|
||||
<view class="c">
|
||||
无门槛
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontainerbottombox_bottomthere_topitem">
|
||||
有效期:{{$u.timeFormat(item1.updateTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="therecontainerbottombox_bottomthere_topitem flex-around">
|
||||
<u-icon v-if="item1.id == item1id" name="checkmark-circle" color="#F1CB66"
|
||||
size="45"></u-icon>
|
||||
<text v-else class="theretext"></text>
|
||||
<view :class="item1.id == item1id?'c':'b'">
|
||||
<text :class="item1.id == item1id?'c':'b'"
|
||||
style="font-size:20rpx ;">¥</text>{{item1.couponsPrice}}/张
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalnumber: '',
|
||||
list: [],
|
||||
orderlist: [{
|
||||
listdata: {},
|
||||
}], //获取优惠券参数列表
|
||||
item1id: '',
|
||||
form: {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
orderfood: '', //等于0扫码点餐下单
|
||||
amount: '' //下单金额传来的值
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
try {
|
||||
this.orderfood = e.orderfood //等于0扫码点餐下单
|
||||
this.amount = e.amount
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.ordermineCouponsthis()
|
||||
this.ordergetYhqParass()
|
||||
},
|
||||
methods: {
|
||||
clickicon(e) { //团购优惠卷
|
||||
this.item1id = e.id
|
||||
e.clickiconone = 1
|
||||
let data = e
|
||||
if (this.orderfood == 0) { //等于0扫码点餐下单
|
||||
if (this.amount > e.couponsAmount) {
|
||||
uni.$emit('emitclickorderfood', e)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '优惠券面值大于支付金额',
|
||||
icon: "none",
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
clickiconone(e) { //自己优惠劵处理
|
||||
e.clickiconone = 0
|
||||
let data = e
|
||||
if (this.orderfood == 0) { //等于0扫码点餐下单
|
||||
if (this.amount > e.couponsAmount) {
|
||||
uni.$emit('emitclickorderfood', data)
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '优惠券面值大于支付金额',
|
||||
icon: "none",
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
async ordergetYhqParass() { //类型列表
|
||||
let res = await this.api.ordergetYhqPara()
|
||||
try {
|
||||
this.orderlist = res.data
|
||||
for (let i = 0; i <= res.data.length; i++) {
|
||||
this.orderfindCouponses(i, this.orderlist[i].name);
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async orderfindCouponses(i, name) {
|
||||
let res = await this.api.orderfindCoupons({
|
||||
page: 1,
|
||||
size: 10,
|
||||
type: name
|
||||
})
|
||||
this.orderlist[i].listdata = res.data.list
|
||||
console.log(this.orderlist)
|
||||
this.$forceUpdate();
|
||||
},
|
||||
async ordermineCouponsthis() {
|
||||
let res = await this.api.ordermineCoupons({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
status: 0,
|
||||
page: this.form.page,
|
||||
size: this.form.size,
|
||||
orderId:''
|
||||
})
|
||||
try {
|
||||
this.totalnumber = res.data.total
|
||||
this.list = res.data.list.slice(0, 2)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
.containertop {
|
||||
padding: 48rpx 32rpx;
|
||||
|
||||
.containertopbox {
|
||||
.containertopboxone {
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitem {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.containertopboxitemleft {
|
||||
position: relative;
|
||||
width: 182rpx;
|
||||
height: 192rpx;
|
||||
background: #F1CB66;
|
||||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
|
||||
::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
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_tows {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemlefts {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.containertopboxitemright {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
flex: auto;
|
||||
height: 192rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||||
|
||||
.containertopboxitemright_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dotted #707070;
|
||||
}
|
||||
|
||||
.containertopboxitemright_tow {
|
||||
margin-top: 14rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containertopboxitemright_there {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.containertopboxitemright_four {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #FE665E;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.containertopboxitemright_fours {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #F7F7F7;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottom {
|
||||
.containerbottomtop {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.containerbottomtoptopbox {
|
||||
view {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottombox_bottom {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 42rpx 0rpx 0rpx 42rpx;
|
||||
|
||||
// overflow-x: auto;
|
||||
.containerbottombox_bottomone {
|
||||
padding: 20rpx 64rpx 0 64rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomtow {
|
||||
margin-top: 16rpx;
|
||||
padding: 0 64rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containerbottombox_bottombox {
|
||||
padding-left: 34rpx;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.containerbottombox_bottomthere:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 46rpx;
|
||||
|
||||
.containerbottombox_bottomthere_topitem {
|
||||
width: 236rpx;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fd5977;
|
||||
|
||||
.towcontainerbottombox_bottomthere_topitem {
|
||||
padding: 20rpx 0 16rpx 0;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onecontainerbottombox_bottomthere_topitem::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
background: #fef7f5;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
|
||||
.onecontainerbottombox_bottomthere_topitem {
|
||||
position: relative;
|
||||
background: #fef7f5;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.containerbottombox_bottomthere_topitemone {
|
||||
width: 136rpx;
|
||||
height: 40rpx;
|
||||
background: #F1CB66;
|
||||
text-align: center;
|
||||
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere_topitemtow {
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
|
||||
.a {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 70rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottombox_bottomthere_topitemthere {
|
||||
position: relative;
|
||||
height: 50rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontainerbottombox_bottomthere_topitem {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.theretext {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.b {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,673 +0,0 @@
|
||||
<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=""></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>
|
||||
</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>
|
||||
</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" 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>
|
||||
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)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
position: relative;
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,377 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view class="onecontentabsolute"></view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentone">
|
||||
<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="towcontentonebox">
|
||||
<image class="towcontentoneboximage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
|
||||
</image>
|
||||
<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"
|
||||
:key="index">
|
||||
<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}}
|
||||
</view>
|
||||
<view class="towcontentonebox">
|
||||
<view class="towcontentoneboxswiper">
|
||||
<view class="swiper-item" style="margin-bottom: 32rpx;">
|
||||
<view class="swiper_itemone">
|
||||
免单状态
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
订单号
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
金额
|
||||
</view>
|
||||
</view>
|
||||
<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 ? '已免单':'待免单'}}
|
||||
</view>
|
||||
<view class="swiper_itemtow">
|
||||
{{item.orderNo}}
|
||||
</view>
|
||||
<view class="swiper_itemthere">
|
||||
{{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>
|
||||
<view class="towcontenttow">
|
||||
注:每笔订单完成后30天内均有机会获得免单
|
||||
</view>
|
||||
</view>
|
||||
</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: {
|
||||
|
||||
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.cache.get('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
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
|
||||
.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: -30rpx;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
.towcontentonebox {
|
||||
width: 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,577 +0,0 @@
|
||||
<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=" "></image>
|
||||
<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(item,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>
|
||||
</view>
|
||||
<!-- <view class="towcontentlistxitembt flex-start">
|
||||
<view class="towcontentlistxitembtitem"
|
||||
:class="index==xitembtitemindex?'towcontentlistxitembtitemaktev':''"
|
||||
v-for="(item,index) in xitembtitem" :key="index" @click="clickxitembtitemindex(item,index)">
|
||||
{{item.name}}
|
||||
</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_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">
|
||||
<view class="fivecontent_item_boxitemleftone_t"><text
|
||||
class="fivecontent_item_boxitemleftone_o">热销TOP.{{index + 1}}</text>{{item.productName}}份
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefttow flex-between">
|
||||
<view class="fivecontent_item_boxitemlefttow_o flex-start">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="">
|
||||
</image>
|
||||
<view> {{item.productName}}</view>
|
||||
</view>
|
||||
<text class="fivecontent_item_boxitemlefttow_t">{{item.distances}}</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefthere 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="fivecontent_item_boxitemlefour flex-start">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/H.png" mode="">
|
||||
</image>
|
||||
<text>已抢{{item.realSalesNumber}}份</text>
|
||||
</view>
|
||||
<view class="fivecontent_item_boxitemlefive">
|
||||
马上抢
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view><u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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: [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '美食正餐'
|
||||
},
|
||||
{
|
||||
name: '饮品小吃'
|
||||
}
|
||||
],
|
||||
xitembtitemindex: 0,
|
||||
|
||||
xitembtitem: [{
|
||||
name: '2小时销量飙升榜',
|
||||
dateType: 1
|
||||
},
|
||||
{
|
||||
name: '今日热榜',
|
||||
dateType: 0
|
||||
}
|
||||
],
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
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() {
|
||||
this.distiricttopCommon()
|
||||
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 1000)
|
||||
},
|
||||
onShow() {
|
||||
this.init_fn()
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//飙升榜
|
||||
clickxitembtitemindex(item, index) {
|
||||
this.xitembtitemindex = index
|
||||
this.list = []
|
||||
this.form.dateType = item.dateType
|
||||
this.form.page = 1
|
||||
this.form.size = 10
|
||||
this.form.status = 'loadmore'
|
||||
this.onLoadlist()
|
||||
},
|
||||
towcontentclick(item, index) {
|
||||
this.towcontentclickindex = index
|
||||
this.list = []
|
||||
this.form.type = item.value
|
||||
this.form.page = 1
|
||||
this.form.size = 10
|
||||
this.form.status = 'loadmore'
|
||||
this.onLoadlist()
|
||||
},
|
||||
// 下面初始数据
|
||||
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: '', //品类
|
||||
orderBy: 4, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: 1,
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
//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)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
async distiricttopCommon() {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: '', //团购卷品类Id/subShop-预约到店
|
||||
orderBy: 4
|
||||
})
|
||||
console.log(res.data)
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
this.listbox = res.data.menu
|
||||
}
|
||||
},
|
||||
clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index', {
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
let res = await this.api.indexlist(this.form)
|
||||
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) {}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
position: relative;
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
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 24rpx 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: 32rpx 24rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
|
||||
.fivecontent_item_box {
|
||||
|
||||
.fivecontent_item_boxitem {
|
||||
image {
|
||||
width: 208rpx;
|
||||
height: 208rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemleft {
|
||||
margin-left: 24rpx;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
.fivecontent_item_boxitemleftone {
|
||||
width: 100%;
|
||||
|
||||
.fivecontent_item_boxitemleftone_t {
|
||||
.fivecontent_item_boxitemleftone_o {
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 2rpx 6rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
font-family: Source Han Sans CN,
|
||||
Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
width: 100%;
|
||||
margin-top: 14rpx;
|
||||
|
||||
.fivecontent_item_boxitemlefttow_o {
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow_t {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefthere {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
align-items: flex-end;
|
||||
|
||||
.fivecontent_item_boxitemlefthere_one {
|
||||
align-items: flex-end;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefour {
|
||||
margin-top: 12rpx;
|
||||
background: #FFEEE9;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF5053;
|
||||
}
|
||||
}
|
||||
.fivecontent_item_boxitemlefive{
|
||||
position: absolute;
|
||||
padding: 8rpx 12rpx;
|
||||
background: #FEE06A;
|
||||
bottom: 32rpx;
|
||||
right: 0;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,283 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- <u-swiper :list="banners" height="460" radius="0" :indicator="banners.length > 1" imgMode="widthFix"></u-swiper> -->
|
||||
|
||||
<view class="container">
|
||||
<view class="after"></view>
|
||||
<view class="onecontent flex-between">
|
||||
<view class="onecontentone flex-start">
|
||||
<image :src="userInfo.headImg" mode="aspectFill">
|
||||
<text>{{userInfo.nickName || '无'}}</text>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttowring flex-colum" @click="memberindex(0)">
|
||||
<text class="onecontenttowringone">{{usershopUserinfo.amount || '0.00'}}</text>
|
||||
<text class="onecontenttowringtow">余额</text>
|
||||
</view>
|
||||
<!-- <view class="onecontenttowring flex-colum">
|
||||
<text class="onecontenttowringone">282</text>
|
||||
<text class="onecontenttowringtow">积分</text>
|
||||
</view> -->
|
||||
<view class="onecontenttowring flex-colum" @click="memberindex(1)">
|
||||
<image class="onecontenttowringone image"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/rwm.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="onecontenttowringtow">会员码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent flex-between">
|
||||
<view class="towcontentitem flex-colum" @click="scanCodehandle(0)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/Instore.png" mode="widthFix"
|
||||
style="width: 86.88rpx; height: 140.94rpx;"></image>
|
||||
<text class="towcontentitemtext">店内就餐</text>
|
||||
</view>
|
||||
<view class="towcontentitem flex-colum" @click="scanCodehandle(1)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/takeaway.png" mode="widthFix"
|
||||
style="width: 164rpx; height: 164rpx"></image>
|
||||
<text class="towcontentitemtext">会员充值</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-banner">
|
||||
<!-- <u-swiper :list="footerBanners" radius="20" height="274" :indicator="banners.length > 1"
|
||||
imgMode="widthFix"></u-swiper> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
banners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/banner1.png'],
|
||||
footerBanners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/footer_banner1.png'],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
usershopUserinfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
amount: '',
|
||||
shopName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
scanCodehandle(i) {
|
||||
if (i == 0) {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
uni.pro.navigateTo('order_food/order_food')
|
||||
}
|
||||
// let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
// if (tableCode) {
|
||||
// uni.pro.navigateTo('order_food/order_food', {
|
||||
// tableCode: tableCode,
|
||||
// })
|
||||
// }
|
||||
}
|
||||
})
|
||||
// uni.navigateTo({
|
||||
// url:'/pages/order_food/order_food'
|
||||
// })
|
||||
} else {
|
||||
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
||||
// shopName: this.usershopUserinfo.shopName,
|
||||
// amount: this.usershopUserinfo.amount,
|
||||
// shopId: uni.cache.get('shopUser')
|
||||
// })
|
||||
uni.pro.navigateTo('member/memberdetails', {
|
||||
shopId_id: uni.cache.get('shopUser'),
|
||||
})
|
||||
}
|
||||
},
|
||||
memberindex(i) {
|
||||
if (i == 0) {
|
||||
uni.pro.navigateTo('member/memberdetails', {
|
||||
shopId_id: uni.cache.get('shopUser'),
|
||||
})
|
||||
} else {
|
||||
// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
|
||||
// shopName: this.usershopUserinfo.shopName,
|
||||
// amount: this.usershopUserinfo.amount,
|
||||
// shopId: uni.cache.get('shopUser')
|
||||
// })
|
||||
let data = {
|
||||
shopName: this.usershopUserinfo.shopName,
|
||||
amount: this.usershopUserinfo.amount,
|
||||
shopId: uni.cache.get('shopUser')
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
console.log(e.detail.avatarUrl)
|
||||
let file = e.detail.avatarUrl;
|
||||
uploadImage(file, 'avatar',
|
||||
result => {
|
||||
//将上传后的图片以对象(官方要求的格式)的形式存入uni-file-picker的value值imageValue(imageValue值的结构为数组包对象)用于图片回显
|
||||
// let objAge = {
|
||||
// 'url': result,
|
||||
// 'extname': 'png',
|
||||
// 'name': 'imgss.png'
|
||||
// };
|
||||
// this.userlist.avatar.push(objAge)
|
||||
this.userInfo.avatar = result
|
||||
console.log(this.userInfo.avatar)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F6F8FA;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: 0 0 0 40rpx;
|
||||
position: relative;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: 46rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #f9f9f9 40rpx);
|
||||
}
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
margin-top: -86rpx;
|
||||
position: relative;
|
||||
height: 172rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 14rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.onecontentone {
|
||||
image {
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #707070;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 12rpx;
|
||||
width: 146rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
.onecontenttowring {
|
||||
margin-left: 32rpx;
|
||||
height: 110rpx;
|
||||
justify-content: flex-end;
|
||||
|
||||
.onecontenttowringone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.onecontenttowringtow {
|
||||
margin-top: 20rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
margin-top: 48rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
height: 314rpx;
|
||||
padding: 0 90rpx 0 120rpx;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 188rpx;
|
||||
width: 2rpx;
|
||||
left: 50%;
|
||||
margin-left: -1rpx;
|
||||
background: #D8D8D8;
|
||||
}
|
||||
|
||||
.towcontentitem {
|
||||
.towcontentitemtext {
|
||||
margin-top: 26rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-banner {
|
||||
margin-top: 48upx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="contentbox">
|
||||
<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">
|
||||
</image>
|
||||
<text class="contentboxitemlefttextone">点餐</text>
|
||||
<text class="contentboxitemlefttexttow">在线点不排队</text>
|
||||
</view>
|
||||
<view class="contentboxitemright">
|
||||
<view class="contentboxitemright_item flex-between" @click="scanCodehandle(1)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xvip.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="contentboxitemright_itembox flex-colum">
|
||||
<text>会员</text>
|
||||
<text>入会享权益</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxitemright_item flex-between" @click="memberindex(0)">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/Xchong.png"
|
||||
mode="aspectFill"></image>
|
||||
<view class="contentboxitemright_itembox flex-colum">
|
||||
<text>充值</text>
|
||||
<text>充值享更多优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
usershopUserinfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
amount: '',
|
||||
shopName: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
scanCodehandle(i) {
|
||||
if (i == 0) {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
uni.cache.set('tableCode', tableCode)
|
||||
if (tableCode) {
|
||||
uni.pro.navigateTo('order_food/order_food')
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.usershopUserinfo.isVip == 0) {
|
||||
// 跳转到开通页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('member/memberdetails', {
|
||||
shopId_id: uni.cache.get('shopUser'),
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
memberindex(i) {
|
||||
if (i == 0) {
|
||||
if (this.usershopUserinfo.isVip == 0) {
|
||||
// 跳转到开通页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('member/memberdetails', {
|
||||
shopId_id: uni.cache.get('shopUser'),
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let data = {
|
||||
shopName: this.usershopUserinfo.shopName,
|
||||
amount: this.usershopUserinfo.amount,
|
||||
shopId: uni.cache.get('shopUser')
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
console.log(e.detail.avatarUrl)
|
||||
let file = e.detail.avatarUrl;
|
||||
uploadImage(file, 'avatar',
|
||||
result => {
|
||||
//将上传后的图片以对象(官方要求的格式)的形式存入uni-file-picker的value值imageValue(imageValue值的结构为数组包对象)用于图片回显
|
||||
// let objAge = {
|
||||
// 'url': result,
|
||||
// 'extname': 'png',
|
||||
// 'name': 'imgss.png'
|
||||
// };
|
||||
// this.userlist.avatar.push(objAge)
|
||||
this.userInfo.avatar = result
|
||||
console.log(this.userInfo.avatar)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F6F8FA;
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1046rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/indexs/shuangbackground.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.contentboxitem {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 90%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
padding: 38rpx 0 26rpx 0;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
.contentboxitemleft {
|
||||
width: 50%;
|
||||
border-right: 2rpx solid #623618;
|
||||
|
||||
image {
|
||||
width: 134rpx;
|
||||
height: 134rpx;
|
||||
}
|
||||
|
||||
.contentboxitemlefttextone {
|
||||
margin-top: 10rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentboxitemlefttexttow {
|
||||
margin-top: 2rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxitemright {
|
||||
width: 50%;
|
||||
padding: 0 34rpx;
|
||||
|
||||
.contentboxitemright_item:nth-child(2) {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.contentboxitemright_item {
|
||||
image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.contentboxitemright_itembox {
|
||||
width: 170rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-top: 2rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,515 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='toplist.name' :titleshow='false'></navseat>
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode=""></image>
|
||||
<view class="onecontentabsolute">
|
||||
<view class="onecontentabsoluteitem flex-between">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/l.png" mode=""></image>
|
||||
<input :disabled="true" type="text" placeholder="订阅提醒,每日爆品上线不错过" />
|
||||
<view class="onecontentabsoluteitembotton">
|
||||
订阅提醒
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<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 style="margin-top: 20rpx;">
|
||||
{{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" 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="10"></uni-countdown>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '今日上新',
|
||||
opacity: false,
|
||||
list: [],
|
||||
toplist: {},
|
||||
form: {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type: '', //品类
|
||||
orderBy: 0, //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.distiricttopCommon()
|
||||
},
|
||||
onShow() {
|
||||
this.onLoadlist()
|
||||
},
|
||||
methods: {
|
||||
async distiricttopCommon() {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: '', //团购卷品类Id/subShop-预约到店
|
||||
orderBy: 0
|
||||
})
|
||||
console.log(res.data)
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
}
|
||||
},
|
||||
clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
this.form = {
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
type: '', //团购卷品类Id
|
||||
distanceInKm: '', //默认10 以经纬度为中心 多大范围以内 单位km
|
||||
orderBy: 0, //0.今日上新 1.离我最近 2.销量优先/热榜推荐 3.价格优先
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
|
||||
}
|
||||
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
|
||||
}
|
||||
})
|
||||
console.log(res.data.list)
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
// if (res.data.pageNum == 1) {
|
||||
// this.is_end = true
|
||||
// }
|
||||
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) {}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 492rpx;
|
||||
position: relative;
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/nav.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
|
||||
.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 {
|
||||
.fivecontent_item_navimage {
|
||||
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_lefttopstart {
|
||||
margin-top: 8rpx;
|
||||
|
||||
.fivecontent_item_nav_leftlang {
|
||||
margin-left: 12rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
.fivecontent_item_nav_leftlangtext {
|
||||
margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlangimage {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_nav_leftlang:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flexstartboxfttow {
|
||||
.fivecontent_item_boxitemlefttow {
|
||||
margin-left: 16rpx;
|
||||
margin-top: 8rpx;
|
||||
width: max-content;
|
||||
padding: 4rpx 10rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
.fivecontent_item_boxitemlefttowtext {
|
||||
margin-left: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 16rpx;
|
||||
color: #F9A511;
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttowimage {
|
||||
width: 10.82rpx;
|
||||
height: 14.06rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_item_boxitemlefttow:nth-child(1) {
|
||||
margin-left: 0;
|
||||
background: #FFD6D7;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,308 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='toplist.name' :titleshow='false'></navseat>
|
||||
<view class="onecontent">
|
||||
<image class="onecontentimage" :src="toplist.coverImg" mode=""></image>
|
||||
<view class="onecontentabsolute">
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="fivecontent_item flex-between" v-for="(item,index) in list" :key="index">
|
||||
<view class="fivecontent_itemone flex-start">
|
||||
<image class="fivecontent_itemoneimage" :src="item.coverImg" mode=""></image>
|
||||
<view class="fivecontent_itemonebox">
|
||||
<view class="fivecontent_itemoneboxone flex-start">
|
||||
<view class="fivecontent_itemoneboxone_o">
|
||||
热销TOP{{index}}
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxone_t">
|
||||
{{item.shopName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxtow flex-start" @click="goMap(item)">
|
||||
<image class="fivecontent_itemoneboxtowimage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="widthFix"></image>
|
||||
<view class="fivecontent_itemoneboxtow_o">
|
||||
{{item.address.length>7?item.address.substring(0,7)+'...':item.address}}
|
||||
</view>
|
||||
<view class="fivecontent_itemoneboxtow_t">
|
||||
{{item.distances}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent_itemtow" @click="makePhoneCall(item)">
|
||||
马上预约
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore height='40' :status="form.status" iconSize='24' fontSize='24' />
|
||||
</view>
|
||||
<!-- 小内切圆 -->
|
||||
<!-- <view class="after"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '今日上新',
|
||||
opacity: false,
|
||||
list: {},
|
||||
toplist: {},
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.onLoadhome()
|
||||
},
|
||||
onShow() {
|
||||
this.init_fn()
|
||||
this.distiricttopCommon()
|
||||
},
|
||||
methods: {
|
||||
goMap(d) {
|
||||
uni.openLocation({
|
||||
longitude: (d.lng * 1),
|
||||
latitude: (d.lat * 1)
|
||||
})
|
||||
// uni.openLocation({
|
||||
// longitude: uni.cache.get('getLocationstorage').lng,
|
||||
// latitude: uni.cache.get('getLocationstorage').lat
|
||||
// })
|
||||
},
|
||||
init_fn(e) {
|
||||
this.list = []
|
||||
this.form.page = 1 //页数
|
||||
this.form.size = 10 //页数
|
||||
this.form.status = 'loadmore' //页数
|
||||
this.distirictsubShopList()
|
||||
},
|
||||
makePhoneCall(item) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: item.phone //仅为示例
|
||||
});
|
||||
},
|
||||
async distiricttopCommon() {
|
||||
let res = await this.api.distiricttopCommon({
|
||||
type: 'subShop', //团购卷品类Id/subShop-预约到店
|
||||
orderBy: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.toplist = res.data.carousel[0]
|
||||
}
|
||||
},
|
||||
async distirictsubShopList() {
|
||||
let res = await this.api.distirictsubShopList({
|
||||
address: uni.cache.get('getLocationstorage').address, //地址
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
distanceInKm: '10', //默认10 以经纬度为中心 多大范围以内 单位km
|
||||
isPage: '', //是否分页 1分页 0不分页
|
||||
page: this.form.page, //页数
|
||||
size: this.form.size, //页容量
|
||||
})
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
height: 460rpx;
|
||||
position: relative;
|
||||
|
||||
.onecontentimage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0 52rpx;
|
||||
bottom: 64rpx;
|
||||
|
||||
.onecontentabsoluteitem {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
image {
|
||||
width: 24.16rpx;
|
||||
height: 29.31rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0 16rpx;
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.onecontentabsoluteitembotton {
|
||||
width: 120rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #FF9D84 0%, #FFFFFF 100%);
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
margin-top: -32rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||||
background: #F9F9F9;
|
||||
|
||||
.fivecontent_item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.fivecontent_item {
|
||||
background: #FFFFFF;
|
||||
padding: 16rpx 24rpx;
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
|
||||
.fivecontent_itemone {
|
||||
.fivecontent_itemoneimage {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.fivecontent_itemonebox {
|
||||
margin-left: 16rpx;
|
||||
height: 84rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.fivecontent_itemoneboxone {
|
||||
.fivecontent_itemoneboxone_o {
|
||||
padding: 2rpx 8rpx;
|
||||
background: linear-gradient(116deg, #FF9D2B 0%, #FF4805 100%);
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxone_t {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.fivecontent_itemoneboxtowimage {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow_o {
|
||||
margin-left: 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.fivecontent_itemoneboxtow_t {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent_itemtow {
|
||||
padding: 8rpx 16rpx;
|
||||
background: #FEE06A;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="container">
|
||||
<!-- 建议放在外层 -->
|
||||
<view class="contentnav">
|
||||
当前城市
|
||||
</view>
|
||||
<!-- 不建议放在层层嵌套的view中,除非您清楚知道自己为什么需要这么做 -->
|
||||
</view>
|
||||
<u-index-list class="container" :index-list="indexList" style="height: 100%;" @select='clickSelect'
|
||||
:scrollTop="scrollTop">
|
||||
<view v-for="(item, index) in itemArr" :key="index" style="height: 100%;">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<u-index-item style="height: 100%;">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<!-- <view class="list-cell">
|
||||
{{item.cities}}
|
||||
</view> -->
|
||||
<view class="list-cell" v-for="(cell,index1) in item.cities" :key="index1">
|
||||
{{cell.name}}
|
||||
</view>
|
||||
</u-index-item>
|
||||
</view>
|
||||
</u-index-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import city from '@/common/js/city.json'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
indexList: city.alphabet,
|
||||
itemArr: city.cityList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickSelect(e) {
|
||||
//从当前位置到达目标位置
|
||||
console.log(">>>当前节点", e, this.scrollTop)
|
||||
try {
|
||||
uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {
|
||||
console.log(">>data", data)
|
||||
//目标位置的节点:类或者id
|
||||
uni.createSelectorQuery().select('.container').boundingClientRect((res) => {
|
||||
console.log(data, res)
|
||||
console.log(">>res.top", res.top)
|
||||
//最外层盒子的节点:类或者id
|
||||
this.$nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: data.top - res.top,
|
||||
// selector: '#' + e,
|
||||
duration: 100 //app端这个必须设置成0
|
||||
})
|
||||
})
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
.exec()
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 使用>>>来穿透组件边界 */
|
||||
.content {
|
||||
.list-cell {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px 24rpx;
|
||||
overflow: hidden;
|
||||
color: #323233;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,31 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box flex-center">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/Logo" mode=""></image>
|
||||
</view>
|
||||
<view class="top_box">
|
||||
<button class="toLogin" open-type="getPhoneNumber" @getphonenumber="userlogin">快速登录 </button>
|
||||
<view class="containerbox flex-colum">
|
||||
<view class="containerimage_logo">
|
||||
<image class="input_itemone" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/manage/login2.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="containertext">
|
||||
微信昵称
|
||||
</view>
|
||||
<view class="containerbottom">
|
||||
<view class="containerbottom_text flex-colum-start">
|
||||
<text>该程序获得以下授权:</text>
|
||||
<text>获得您的手机号</text>
|
||||
</view>
|
||||
<view class="containerbottom_item flex-between">
|
||||
<navigator class="containerbottomone" open-type="exit" target="miniProgram"><button
|
||||
class="containerbottomone" open-type="launchApp" app-parameter="wechat"
|
||||
binderror="launchAppError">
|
||||
暂不授权
|
||||
</button></navigator>
|
||||
<button class="containerbottomtow" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||
确认授权
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -13,170 +33,272 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
h: null, //动态高度
|
||||
types: '', //判断是否是微信扫码点餐进来
|
||||
};
|
||||
phone: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.computed_h();
|
||||
this.userlogin() // 静默登录
|
||||
onLoad() {
|
||||
uni.cache.clear();
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 静默登录
|
||||
// userlogin(reslange) {
|
||||
// uni.login({
|
||||
// provider: 'weixin',
|
||||
// success: async (data) => {
|
||||
// if (data.errMsg == "login:ok") {
|
||||
// console.log(data.code, '调试-code')
|
||||
// let res = await this.api.userwxlogins({
|
||||
// code: data.code,
|
||||
// // rawData: infoRes.rawData,
|
||||
// // signature: infoRes.signature,
|
||||
// // iv: reslange.detail.iv,
|
||||
// // encryptedData: resdataa.detail.encryptedData
|
||||
// })
|
||||
// if (res.code == 0) {}
|
||||
// // if (uni.cache.get('types') == 'types') {
|
||||
// // uni.reLaunch({
|
||||
// // url: '/pages/order_food/order_food'
|
||||
// // });
|
||||
// // } else {
|
||||
// // uni.pro.switchTab('index/index')
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// 正常登录
|
||||
async userlogin(reslange) {
|
||||
var resdataa = reslange
|
||||
// if (resdataa.detail.iv) {
|
||||
uni.login({
|
||||
async userlogin() {
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.login({ //alipay weixin
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'weixin',
|
||||
// #endif
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
console.log(infoRes, 81);
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
encryptedData: infoRes
|
||||
.encryptedData, // 用户非敏感信息
|
||||
rawData: infoRes.rawData,
|
||||
// signature: infoRes.signature,
|
||||
// iv: infoRes.detail.iv,
|
||||
// encryptedData: infoRes.detail
|
||||
// .encryptedData
|
||||
signature: infoRes.signature,
|
||||
iv: infoRes.iv,
|
||||
phone: this.phone
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res, 88)
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
if (uni.cache.get('types') == 'types') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/order_food/order_food'
|
||||
});
|
||||
} else {
|
||||
uni.pro.switchTab('index/index')
|
||||
}
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.pro.switchTab('index/index')
|
||||
}
|
||||
},
|
||||
fail: (err) => {}
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
|
||||
// uni.pro.navigateTo('pay_code/pay_code', {
|
||||
// nickName:userInfo.nickName,
|
||||
// nickName:userInfo.nickName
|
||||
// })
|
||||
// uni.getUserInfo({
|
||||
// provider: 'weixin',
|
||||
// success: async (infoRes) => {
|
||||
// console.log(infoRes, 81);
|
||||
// // let res = await this.api.userwxlogin({
|
||||
// // code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
// // rawData: '', // 用户非敏感信息
|
||||
// // rawData: '' // 签名
|
||||
// // })
|
||||
// // if (res) {
|
||||
// // console.log(res, 88)
|
||||
// // }
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log(err)
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '获取手机号失败!请重新获取',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// }
|
||||
// #endif
|
||||
},
|
||||
async computed_h() {
|
||||
//获取div宽度
|
||||
let content_Icon = await uni.utils.info_distance('box');
|
||||
let system_info = await uni.getSystemInfo();
|
||||
let h = null;
|
||||
h = system_info.windowHeight - content_Icon.height + 'px';
|
||||
this.h = {
|
||||
height: h
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
console.log(res)
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.logingetPhoneNumber({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
console.log(resdata)
|
||||
if (resdata.data) {
|
||||
this.phone = resdata.data
|
||||
this.userlogin()
|
||||
}
|
||||
// this.userlogin()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
button {}
|
||||
|
||||
.container {
|
||||
// position: relative;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.box {
|
||||
// padding-top: 110rpx;
|
||||
position: fixed;
|
||||
top: 110rpx;
|
||||
left: 50%;
|
||||
z-index: 22;
|
||||
transform: translateX(-50%);
|
||||
|
||||
image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top_box::after {
|
||||
position: absolute;
|
||||
// content: url(@/static/icon.png);
|
||||
width: 282rpx;
|
||||
height: 280rpx;
|
||||
top: -240rpx;
|
||||
right: 32rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.top_box {
|
||||
z-index: 9;
|
||||
padding: 0 64rpx;
|
||||
box-sizing: border-box;
|
||||
.containerbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx 40rpx 0px 0px;
|
||||
top: 220rpx;
|
||||
|
||||
.toLogin {
|
||||
margin-top: 212rpx;
|
||||
width: 100%;
|
||||
background: #F1CB66;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
border: none;
|
||||
.containerimage_logo {
|
||||
margin-top: 66rpx;
|
||||
border-radius: 50%;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.containertext {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.containerbottom {
|
||||
margin-top: 40rpx;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 100%;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.containerbottom_text {
|
||||
margin-top: 32rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #847f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottom_item {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.containerbottomone {
|
||||
padding: 10rpx 60rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.containerbottomone::after {
|
||||
background: none;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.containerbottomtow {
|
||||
font-size: 24rpx;
|
||||
background: #baf505;
|
||||
border: none;
|
||||
padding: 10rpx 60rpx;
|
||||
}
|
||||
|
||||
.containerbottomtow::after {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: -118rpx;
|
||||
z-index: 90;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.wrapper_box {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 16rpx 30rpx;
|
||||
|
||||
.input_content {
|
||||
.input_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.input_itemone {
|
||||
width: 49.68rpx;
|
||||
height: 49.68rpx;
|
||||
}
|
||||
|
||||
.input_itemtow {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.input_itemtowicon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 2rpx solid rgba(229, 229, 229, 0.7);
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 24rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #7c8e97;
|
||||
|
||||
.agreement-Item {
|
||||
color: #4ca1fc;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
margin: 40rpx auto 50rpx auto;
|
||||
width: 90%;
|
||||
background: #2F87FD;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,280 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="containerbox flex-colum">
|
||||
<view class="containerimage_logo">
|
||||
<image class="input_itemone" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/manage/login2.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="containertext">
|
||||
微信昵称
|
||||
</view>
|
||||
<view class="containerbottom">
|
||||
<view class="containerbottom_text flex-colum-start">
|
||||
<text>该程序获得以下授权:</text>
|
||||
<text>获得您的手机号</text>
|
||||
</view>
|
||||
<view class="containerbottom_item flex-between">
|
||||
<navigator class="containerbottomone" open-type="exit" target="miniProgram"><button
|
||||
class="containerbottomone" open-type="launchApp" app-parameter="wechat"
|
||||
binderror="launchAppError">
|
||||
暂不授权
|
||||
</button></navigator>
|
||||
<button class="containerbottomtow" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||
确认授权
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.cache.clear();
|
||||
|
||||
},
|
||||
methods: {
|
||||
async userlogin() {
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.login({ //alipay weixin
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'weixin',
|
||||
// #endif
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
console.log(infoRes, 81);
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
encryptedData: infoRes
|
||||
.encryptedData, // 用户非敏感信息
|
||||
rawData: infoRes.rawData,
|
||||
signature: infoRes.signature,
|
||||
iv: infoRes.iv,
|
||||
phone: this.phone
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res, 88)
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.pro.switchTab('index/index')
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
console.log(res)
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.logingetPhoneNumber({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
console.log(resdata)
|
||||
if (resdata.data) {
|
||||
this.phone = resdata.data
|
||||
this.userlogin()
|
||||
}
|
||||
// this.userlogin()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
button {}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
.containerbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.containerimage_logo {
|
||||
margin-top: 66rpx;
|
||||
border-radius: 50%;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.containertext {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.containerbottom {
|
||||
margin-top: 40rpx;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 100%;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.containerbottom_text {
|
||||
margin-top: 32rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #847f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottom_item {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.containerbottomone {
|
||||
padding: 10rpx 80rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.containerbottomone::after {
|
||||
background: none;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.containerbottomtow {
|
||||
font-size: 24rpx;
|
||||
background: #baf505;
|
||||
border: none;
|
||||
padding: 10rpx 80rpx;
|
||||
}
|
||||
|
||||
.containerbottomtow::after {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: -118rpx;
|
||||
z-index: 90;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.wrapper_box {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 16rpx 30rpx;
|
||||
|
||||
.input_content {
|
||||
.input_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.input_itemone {
|
||||
width: 49.68rpx;
|
||||
height: 49.68rpx;
|
||||
}
|
||||
|
||||
.input_itemtow {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.input_itemtowicon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 2rpx solid rgba(229, 229, 229, 0.7);
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 24rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #7c8e97;
|
||||
|
||||
.agreement-Item {
|
||||
color: #4ca1fc;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
margin: 40rpx auto 50rpx auto;
|
||||
width: 90%;
|
||||
background: #2F87FD;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,375 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="box flex-colum-start">
|
||||
<text>您好,</text>
|
||||
<text>欢迎使用零点八零</text>
|
||||
</view>
|
||||
<view class="top_box" :style="h">
|
||||
<view class="top_box_one">
|
||||
<text class="top_box_one_text">用户昵称</text>
|
||||
<input type="text" v-model="form.nickName" placeholder="请输入用户昵称" data-key="mobile" />
|
||||
</view>
|
||||
<view class="top_box_one">
|
||||
<text class="top_box_one_text">手机号码</text>
|
||||
<input type="text" v-model="form.telephone" placeholder="请输入手机号码" data-key="mobile" />
|
||||
</view>
|
||||
<view class="top_box_one">
|
||||
<text class="top_box_one_text">密码</text>
|
||||
<input type="mobile" v-model="form.password" placeholder="8-16位密码" maxlength="16"
|
||||
:password="!showPassword" />
|
||||
<view class="repeat" @click="display">
|
||||
<u-icon name="eye" v-if="showPassword"></u-icon>
|
||||
<u-icon v-else name="eye-off"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top_box_one">
|
||||
<text class="top_box_one_text">验证码</text>
|
||||
<input type="mobile" v-model="form.code" placeholder="请输入短信验证码" maxlength="6" />
|
||||
<view class="repeats">
|
||||
<view v-if="showText == true" class="yzm"
|
||||
style="padding: 8rpx 16rpx 6rpx 16rpx; background: #288efb; border-radius: 15rpx"
|
||||
@click="CodeRegister">
|
||||
{{ Recapture }}
|
||||
</view>
|
||||
<view v-else
|
||||
style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx">
|
||||
{{ second }}s重新发送</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="top_box_one">
|
||||
<text class="top_box_one_text" @click="showTips">
|
||||
邀请码(选填)
|
||||
<uni-icons type="help" size="18"></uni-icons>
|
||||
</text>
|
||||
<input type="mobile" v-model="form.inviteCode" placeholder="请输入邀请人邀请码" />
|
||||
</view> -->
|
||||
<view class="Register" @click="Register">注册</view>
|
||||
<view class="agreement flex-start">
|
||||
<u-checkbox-group><u-checkbox shape="circle" @change="radioChange"
|
||||
size="12"></u-checkbox></u-checkbox-group>
|
||||
<text>阅读并同意银收客</text>
|
||||
<view class="agreement-Item" @click="Privacy(1)">《用户协议》</view>
|
||||
及
|
||||
<view class="agreement-Item" @click="Privacy(3)">《隐私政策》</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radioChangeItem: false, //单选框
|
||||
h: null,
|
||||
showPassword: false,
|
||||
// 注册定时器 初始值
|
||||
second: 60,
|
||||
showText: true,
|
||||
Recapture: '发送验证码',
|
||||
form: {
|
||||
nickName: '',
|
||||
telephone: '',
|
||||
password: '',
|
||||
code: '',
|
||||
inviteCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.computed_h();
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
showTips() {
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: '若该邀请码的用户无推广权限,将自动绑定到其上级名下',
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
leftClick() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
async CodeRegister() {
|
||||
//发起验证码
|
||||
if (this.form.telephone == null || this.form.telephone == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
const res = await this.api.phoneValidateCode({
|
||||
// post 手机验证码
|
||||
phone: this.form.telephone
|
||||
});
|
||||
console.log(res);
|
||||
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);
|
||||
}
|
||||
},
|
||||
radioChange(n) {
|
||||
//是否同意
|
||||
console.log(n);
|
||||
this.radioChangeItem = n;
|
||||
},
|
||||
display() {
|
||||
// 切换密码显示隐藏
|
||||
this.showPassword = !this.showPassword;
|
||||
},
|
||||
async Privacy(e) {
|
||||
if (e == 1) {
|
||||
//用户协议
|
||||
let res = await this.api.agreementgetAgreementOne({
|
||||
discern: 0
|
||||
});
|
||||
uni.pro.navigateTo('my/about/agreement', {
|
||||
discern: 0,
|
||||
list: res.data.content
|
||||
});
|
||||
} else {
|
||||
let res3 = await this.api.agreementgetAgreementOne({
|
||||
discern: 3
|
||||
});
|
||||
uni.pro.navigateTo('my/about/agreement', {
|
||||
discern: 3,
|
||||
list: res3.data.content
|
||||
});
|
||||
}
|
||||
},
|
||||
async computed_h() {
|
||||
//获取div宽度
|
||||
let content_Icon = await uni.utils.info_distance('box');
|
||||
let content_top_box = await uni.utils.info_distance('top_box');
|
||||
let system_info = await uni.getSystemInfo();
|
||||
var h_ = null;
|
||||
if (content_Icon.height + content_top_box.height > system_info.windowHeight) {
|
||||
console.log(135);
|
||||
h_ = content_top_box.height + 30 + 'px';
|
||||
} else {
|
||||
h_ = system_info.windowHeight - content_Icon.height + 'px';
|
||||
}
|
||||
this.h = {
|
||||
height: h_
|
||||
};
|
||||
},
|
||||
async Register() {
|
||||
//注册
|
||||
if (this.form.nickName == null || this.form.nickName == '') {
|
||||
uni.showToast({
|
||||
title: '请输入用户昵称',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.telephone == null || this.form.telephone == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.password == null || this.form.password == '' || uni.$u.trim(this.form.password, 'all') ==
|
||||
'') {
|
||||
uni.showToast({
|
||||
title: '请输入密码或密码不能输入空格',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.code == null || this.form.code == '') {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.radioChangeItem == false) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请先阅读《用户协议》和《隐私政策》'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let res = await this.api.cashierServiceloginregister({
|
||||
telephone: this.form.telephone,
|
||||
nickName: this.form.nickName,
|
||||
password: this.form.password,
|
||||
code: this.form.code,
|
||||
// inviteCode: this.form.inviteCode,
|
||||
source: 'promoter'
|
||||
});
|
||||
if (res) {
|
||||
setTimeout((res) => {
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'none',
|
||||
success: () => {
|
||||
uni.navigateTo({
|
||||
url: '../login/login'
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 1500);
|
||||
// uni.cache.set('storage:authorization', res.data.auth_token);
|
||||
// this.$store.commit('set_login', true);
|
||||
// uni.pro.switchTab('index/index');
|
||||
}
|
||||
// if (result.status === 1) {
|
||||
// this.login(result.data);
|
||||
// uni.navigateBack();
|
||||
// } else {
|
||||
// this.$api.msg(result.msg);
|
||||
// this.logining = false;
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
width: 100%;
|
||||
background: linear-gradient(104deg, #4679ff 0%, #2868e8 47%, #2a94fc 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 64rpx;
|
||||
|
||||
.u-navbar--fixed {
|
||||
top: 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
padding-top: 228rpx;
|
||||
padding-left: 64rpx;
|
||||
padding-bottom: 144rpx;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.top_box::after {
|
||||
position: absolute;
|
||||
// content: url(@/static/icon.png);
|
||||
width: 282rpx;
|
||||
height: 280rpx;
|
||||
top: -240rpx;
|
||||
right: 32rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.top_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx 40rpx 0px 0px;
|
||||
|
||||
.top_box_one {
|
||||
position: relative;
|
||||
width: 85%;
|
||||
margin-top: 64rpx;
|
||||
border-bottom: 6rpx solid #e5e5e5;
|
||||
|
||||
.top_box_one_text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 18rpx 0 20rpx 0;
|
||||
}
|
||||
|
||||
.repeat {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 0;
|
||||
width: 25rpx;
|
||||
height: 17rpx;
|
||||
}
|
||||
|
||||
.repeats {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
z-index: 9;
|
||||
font-family: $uni_family;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top_box_tow {
|
||||
width: 85%;
|
||||
|
||||
text {
|
||||
margin-top: 34rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: $uni_family;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.Register {
|
||||
width: 75%;
|
||||
margin-top: 112rpx;
|
||||
padding: 10rpx 0;
|
||||
text-align: center;
|
||||
background: #288efb;
|
||||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: $uni_family;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 14rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #7c8e97;
|
||||
|
||||
.agreement-Item {
|
||||
color: #4ca1fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,7 +14,7 @@
|
||||
</view>
|
||||
<view class="item" @click="goMap">
|
||||
<text class="t" style="margin-right: 12upx">门店地址:{{shopInfo.address || '无'}}</text>
|
||||
<!-- <u-icon :name="require('@/static/icon_address.png')"></u-icon> -->
|
||||
<u-icon :name="require('@/static/icon_address.png')"></u-icon>
|
||||
</view>
|
||||
<!-- <view class="item">
|
||||
<text class="t undline">点击查看近期预约</text>
|
||||
@@ -27,6 +27,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
shopInfo:{}
|
||||
};
|
||||
@@ -61,11 +62,16 @@
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
makePhoneCall(e) {
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
<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: uni.cache.get('shopUser')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<!-- 账单明细 -->
|
||||
<view>
|
||||
<view class="bild">
|
||||
<view class="bildLeft">
|
||||
<text>我的余额</text>
|
||||
<view>{{info.amount}}</view>
|
||||
</view>
|
||||
<view class="bildRight">
|
||||
<text>我的积分</text>
|
||||
<view>{{info.levelConsume}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="navTop">
|
||||
<view @click="clickEvent(1)" :class="[active==1?'fonts':'']">
|
||||
余额明细
|
||||
<view :class="[active==1?'xian':'']" style="left: 36rpx;"> </view>
|
||||
</view>
|
||||
<view @click="clickEvent(2)" :class="[active==2?'fonts':'']">
|
||||
积分明细
|
||||
<view :class="[active==2?'xian':'']" style="left: 36rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listStyle" v-for="(item,i) in list" :key="i">
|
||||
<!-- <image :src="require('')" style="width: 76rpx;height: 76rpx;float: left;" mode=""></image> -->
|
||||
<view class="listrigth">
|
||||
<view>{{item.biz_name}}</view>
|
||||
<view :class="[item.type == '+'?'colorStyle':'']">{{item.type}}{{item.amount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="listrigth2">
|
||||
<view>{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
|
||||
<view>余额:{{item.balance}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
list: [],
|
||||
form: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
memberId: null
|
||||
},
|
||||
info: null
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.info = e
|
||||
this.form.memberId = e.memberId
|
||||
this.getlist()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getlist()
|
||||
},
|
||||
methods: {
|
||||
// 检测是否包含In
|
||||
checkIn(str) {
|
||||
let reg = RegExp(/In/)
|
||||
return str.match(reg)
|
||||
},
|
||||
async getlist() {
|
||||
if (this.active == 1) {
|
||||
let res = await this.api.queryMemberAccount(this.form)
|
||||
if (res.code == 0) {
|
||||
if (this.form.page == 1) {
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
this.form.page++
|
||||
this.list.push(res.data.list)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.list = []
|
||||
}
|
||||
},
|
||||
clickEvent(i) {
|
||||
this.active = i
|
||||
this.getlist()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bild {
|
||||
height: 320rpx;
|
||||
background-image: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/czmxbg.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;
|
||||
|
||||
.fonts {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
>view {
|
||||
position: relative;
|
||||
|
||||
.xian {
|
||||
width: 58rpx;
|
||||
height: 6rpx;
|
||||
background: #FFAA62;
|
||||
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
||||
position: absolute;
|
||||
bottom: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.listStyle {
|
||||
padding: 28rpx;
|
||||
padding-top: 50rpx;
|
||||
width: 100%;
|
||||
|
||||
.listrigth,
|
||||
.listrigth2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// padding-left: 32rpx;
|
||||
}
|
||||
|
||||
.listrigth {
|
||||
.colorStyle {
|
||||
color: #FF7127;
|
||||
}
|
||||
|
||||
>view {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.listrigth2 {
|
||||
margin-top: 6rpx;
|
||||
|
||||
>view {
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<view class="towcontentitem">
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="userInfo.logo" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{userInfo.shopName || '暂无昵称'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentitemthere flex-start">
|
||||
余额:<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text>
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">VIP{{userInfo.code || '无'}}</text>
|
||||
</view>
|
||||
<view class="towcontentitevip">
|
||||
VIP{{userInfo.isVip||''}}
|
||||
</view>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/erweima.png" class="imgStyle" mode=""
|
||||
@click="clickEvent"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['userInfo'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.userInfo, '调试1113')
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
if (this.userInfo.amount) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(this.userInfo)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.towcontentitemtheretext {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imgStyle {
|
||||
width: 54rpx;
|
||||
height: 52rpx;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 30rpx;
|
||||
// border: 2px solid #fff;
|
||||
z-index: 666;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,26 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<card :userInfo="userInfo"></card>
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="@/static/recharges.png" mode="widthFix"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="userInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{userInfo.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>
|
||||
@@ -8,65 +28,47 @@
|
||||
<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.minNum}}元</text>
|
||||
<text style="margin-top: 10rpx;">充{{item.minNum}}送{{item.handselNum}}</text>
|
||||
<text>充{{item.amount}}元</text>
|
||||
<!-- <text style="margin-top: 10rpx;">送{{item.deliver}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent" @tap="$u.debounce(userbalancerechangesub, 500)">
|
||||
<view class="fivecontent" @click="userbalancerechangesub">
|
||||
立即充值
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from './components/card.vue'
|
||||
export default {
|
||||
components: {
|
||||
card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputshow: 0,
|
||||
listdata: [],
|
||||
memberlist: {},
|
||||
listdata: [{
|
||||
amount: 100
|
||||
},{
|
||||
amount: 200
|
||||
},{
|
||||
amount:300
|
||||
},{
|
||||
amount:400
|
||||
},{
|
||||
amount:500
|
||||
},{
|
||||
amount:1000
|
||||
}
|
||||
],
|
||||
amount: '',
|
||||
userInfo: {},
|
||||
shopId: ''
|
||||
shopUser: {},
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopId = e.shopId
|
||||
if (e.type == 'list') { //从列表进来的
|
||||
this.paygetShopByMember(e.shopId)
|
||||
} else {
|
||||
this.paygetShopByMember(e.shopId)
|
||||
}
|
||||
this.paygetActive(e.shopId) //列表
|
||||
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
},
|
||||
methods: {
|
||||
async paygetShopByMember(w) {
|
||||
let res = await this.api.paygetShopByMember({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: this.shopId
|
||||
})
|
||||
this.userInfo = res.data.list[0]
|
||||
},
|
||||
async paygetActive() {
|
||||
let res = await this.api.paygetActive({
|
||||
shopId: this.shopId,
|
||||
page: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
try {
|
||||
this.listdata = res.data.list
|
||||
this.amount = res.data.list[0].minNum
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async userbalancerechangesub() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
@@ -76,44 +78,47 @@
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.paymemeberIn({
|
||||
shopId: this.shopId, // 判断显示哪家的作品,
|
||||
shopId: uni.cache.get('shopUser').shopId, // 判断显示哪家的作品,
|
||||
amount: this.amount // 判断显示哪家的作品,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.hideLoading()
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 500)
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (res) => {
|
||||
uni.hideLoading()
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
uni.hideLoading()
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
clickinput(a, b) {
|
||||
console.log(a, b)
|
||||
this.inputshow = b
|
||||
this.amount = a.minNum
|
||||
this.amount = a.amount
|
||||
},
|
||||
eeInfo(e) {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -132,19 +137,21 @@
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
|
||||
&::after {
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
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%;
|
||||
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 {
|
||||
@@ -158,6 +165,7 @@
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
@@ -175,10 +183,10 @@
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
@@ -198,46 +206,44 @@
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
margin-top: 84rpx;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -283,7 +289,7 @@
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
// border: 1rpx solid #333333;
|
||||
border: 1rpx solid #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
@@ -308,8 +314,6 @@
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
position: relative;
|
||||
bottom: 44rpx;
|
||||
margin-top: 62rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,188 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="onecontentone">
|
||||
我的会员卡<text v-if="list.length!=0">({{list.length}})</text>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="towcontentitem" v-if="list.length>0" v-for="(item,index) in 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="list.length== 0 && is_end == true" class="flex-colum">
|
||||
<image :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" iconSize='24' fontSize='24' height='40' />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
list: [],
|
||||
is_end: false,
|
||||
nickname: uni.cache.get('userInfo').nickName,
|
||||
form: {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
userId: uni.cache.get('userInfo').id
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.list = []
|
||||
this.form = {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
this.paygetShopByMember()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.paygetShopByMember()
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
async paygetShopByMember() {
|
||||
let res = await this.api.paygetShopByMember({
|
||||
page: this.form.page,
|
||||
pageSize: this.form.size,
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: ''
|
||||
})
|
||||
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list == 0) {
|
||||
this.is_end = true
|
||||
}
|
||||
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)
|
||||
}
|
||||
},
|
||||
eeInfo(item) {
|
||||
uni.pro.navigateTo('member/memberdetails', {
|
||||
shopId_id: item.shopId
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -1,304 +0,0 @@
|
||||
<template>
|
||||
<!-- 会员详情 -->
|
||||
<view class="content">
|
||||
<card :userInfo="userInfo"></card>
|
||||
<view class="memberdetailsStyle">
|
||||
<text>会员详情</text>
|
||||
<view @click="goUrl('member/billDetails')">
|
||||
<text>账单明细</text>
|
||||
<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
|
||||
</view>
|
||||
<view @click="goUrlinfo('member/index')">
|
||||
<text>会员充值</text>
|
||||
<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from './components/card.vue'
|
||||
export default {
|
||||
components: {
|
||||
card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopId_id: null,
|
||||
inputshow: 0,
|
||||
memberlist: {},
|
||||
listdata: [],
|
||||
amount: '',
|
||||
userInfo: {},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
console.log(e)
|
||||
this.shopId_id = e.shopId_id
|
||||
},
|
||||
onShow() {
|
||||
this.paygetShopByMember(this.shopId_id)
|
||||
},
|
||||
methods: {
|
||||
async paygetShopByMember(w) {
|
||||
let res = await this.api.paygetShopByMember({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: w
|
||||
})
|
||||
this.userInfo = res.data.list[0]
|
||||
},
|
||||
clickinput(a, b) {
|
||||
console.log(a, b)
|
||||
this.inputshow = b
|
||||
this.amount = a.minNum
|
||||
},
|
||||
goUrl(url) {
|
||||
uni.pro.navigateTo(url, this.userInfo)
|
||||
},
|
||||
goUrlinfo(url) {
|
||||
uni.pro.navigateTo(url, {
|
||||
shopId: this.shopId_id,
|
||||
type: 'list'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.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>
|
||||
@@ -1,399 +0,0 @@
|
||||
<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>
|
||||
@@ -1,600 +0,0 @@
|
||||
<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>
|
||||
@@ -1,339 +0,0 @@
|
||||
<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>
|
||||
@@ -1,40 +1,17 @@
|
||||
<template>
|
||||
<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>
|
||||
<u-sticky bgColor="#fff">
|
||||
<view class="tab-wrap">
|
||||
<block v-if="navtabindex==1">
|
||||
<view class="item" v-for="(item, index) in tabs2" :key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="navtabindex==0">
|
||||
<view class="item" v-for="(item, index) in tabs" :key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="item" v-for="(item, index) in tabs" :key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="line-wrap"
|
||||
:style="{ left: `${(100 / tabs.length) * active}%`, width: `${100 / tabs.length}%` }">
|
||||
<view class="line">
|
||||
<image style="width:40rpx; height: 10rpx;"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/today/dgs.png"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="list-wrap" v-if="navtabindex == 0">
|
||||
<view class="list-wrap">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" @click="orderinfo(item)">
|
||||
<view class="header-wrap">
|
||||
<text v-if="item.sendType == 'post'">快递</text>
|
||||
@@ -60,7 +37,7 @@
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'cancelled'">
|
||||
<text>已取消</text>
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'merge'">
|
||||
<text>合台</text>
|
||||
@@ -69,18 +46,19 @@
|
||||
<view class="content">
|
||||
<view class="shop-info">
|
||||
<view class="shop-item">
|
||||
<view class="cover flex-start" v-for="(item1,index1) in item.detailList" :key="index1">
|
||||
<view class="cover flex-start" v-for="(item1,index1) in item.detailList"
|
||||
:key="index1">
|
||||
<!-- <image :src="item1.productImg" style="width: 200rpx;height: 200rpx; border-radius: 20rpx;" mode="widthFix"></image> -->
|
||||
<c-image width="200" height="200" radius="20" :src="item1.productImg"></c-image>
|
||||
</view>
|
||||
<!-- <view class="info">
|
||||
<text class="name">美味大宅蟹</text>
|
||||
<text class="num">数量:1</text>
|
||||
</view> -->
|
||||
<text class="name">美味大宅蟹</text>
|
||||
<text class="num">数量:1</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="total" v-if="item.status != 'cancelled'">
|
||||
<text class="t">{{item.description}}</text>
|
||||
<view class="total">
|
||||
<text class="t">需付款</text>
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.orderAmount}}</text>
|
||||
</view>
|
||||
@@ -96,32 +74,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 新订单 -->
|
||||
<view class="orderList" v-if="navtabindex == 1">
|
||||
<view class="listBox" v-for="(item,i) in groupList" :key="i" @click="orderinfoTo(item)">
|
||||
<view class="df">
|
||||
<view style="display: flex;">
|
||||
<text>{{item.proName.length>10?item.proName.substring(0,10)+'...':item.proName}}</text><u-icon
|
||||
name="arrow-right" color="#000" size="28"></u-icon>
|
||||
</view>
|
||||
<text
|
||||
:class="[item.status=='unpaid'||item.status=='unused'?'state':'state2']">{{item.status|statusFirter}}</text>
|
||||
</view>
|
||||
<view class="df" style="justify-content: flex-start;margin-top: 32rpx;">
|
||||
<image style="width:120rpx; height: 120rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;"
|
||||
:src="item.proImg" mode="aspectFill">
|
||||
</image>
|
||||
<view class="ml-20 fontStyle">
|
||||
<view>数量:{{item.number}}份</view>
|
||||
<view>实付:<text style="color: #FF4C11;">¥{{item.payAmount}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<button v-if="item.status=='unused'" type="primary" class="buttonStyle">查看券码</button>
|
||||
<button v-if="item.status=='unpaid'" type="primary" class="buttonStyle">去付款</button>
|
||||
</view>
|
||||
</view>
|
||||
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</view>
|
||||
</template>
|
||||
@@ -132,7 +84,6 @@
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
navtabindex: 0,
|
||||
tabs: [{
|
||||
name: '全部',
|
||||
type: 1,
|
||||
@@ -148,7 +99,6 @@
|
||||
type: 3,
|
||||
status: 'unsend'
|
||||
},
|
||||
|
||||
{
|
||||
name: '已完成',
|
||||
type: 4,
|
||||
@@ -158,37 +108,9 @@
|
||||
name: '退款',
|
||||
type: 5,
|
||||
status: 'refund'
|
||||
},
|
||||
],
|
||||
tabs2: [{
|
||||
name: '全部',
|
||||
type: 1,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
name: '待支付',
|
||||
type: 2,
|
||||
status: 'unpaid'
|
||||
},
|
||||
{
|
||||
name: '待使用',
|
||||
type: 3,
|
||||
status: 'unused'
|
||||
},
|
||||
|
||||
{
|
||||
name: '已完成',
|
||||
type: 4,
|
||||
status: 'closed'
|
||||
},
|
||||
{
|
||||
name: '退款',
|
||||
type: 5,
|
||||
status: 'refund'
|
||||
},
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
groupList: [],
|
||||
is_end: false,
|
||||
swiperCurrent: '',
|
||||
form: {
|
||||
@@ -207,42 +129,24 @@
|
||||
} else {
|
||||
this.active = (this.tabs.findIndex((item) => item.type == this.useStorage.get('orderType')));
|
||||
}
|
||||
this.swiperCurrent = ''
|
||||
this.init_fn()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.navtabindex == 1) {
|
||||
// 获取团购订单
|
||||
this.getorderList()
|
||||
} else {
|
||||
this.orderorderList()
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFirter(e) {
|
||||
// 状态: unpaid-待付款;unused-待使用;closed-已完成;refunding-退款中;refund-已退款;cancelled-已取消;
|
||||
if (e == 'closed') return '已完成'
|
||||
else if (e == 'paying') return '支付中'
|
||||
else if (e == 'unpaid') return '待付款'
|
||||
else if (e == 'unused') return '待使用'
|
||||
else if (e == 'refunding') return '退款中'
|
||||
else if (e == 'refund') return '已退款'
|
||||
else if (e == 'cancelled') return '已取消'
|
||||
}
|
||||
this.orderorderList()
|
||||
},
|
||||
methods: {
|
||||
// 切换导航栏
|
||||
navtabclick(i) {
|
||||
this.navtabindex = i
|
||||
this.init_fn()
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
orderinfo(e) {
|
||||
@@ -250,24 +154,12 @@
|
||||
orderId: e.id
|
||||
})
|
||||
},
|
||||
orderinfoTo(e) {
|
||||
uni.pro.navigateTo('group_order/order_groupdetail', {
|
||||
orderId: e.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
// this.list = []
|
||||
this.groupList = []
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.size = 10
|
||||
this.form.status = 'loadmore'
|
||||
if (this.navtabindex == 1) {
|
||||
// 获取团购订单
|
||||
this.getorderList()
|
||||
} else {
|
||||
this.orderorderList()
|
||||
}
|
||||
this.orderorderList()
|
||||
},
|
||||
orderswitch(e, a) {
|
||||
this.active = a
|
||||
@@ -285,60 +177,24 @@
|
||||
userId: uni.cache.get('userInfo').id, //userId
|
||||
status: this.swiperCurrent
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
if (res.data.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list.length == 0) {
|
||||
this.list = []
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
setTimeout(() => {
|
||||
if (this.form.page == 1) {
|
||||
console.log(111)
|
||||
this.list = res.data.list
|
||||
} else {
|
||||
console.log(222)
|
||||
this.list = [...this.list, ...res.data.list];
|
||||
}
|
||||
this.form.page = ++this.form.page;
|
||||
if (this.form.page > res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
}
|
||||
}, 500)
|
||||
|
||||
}
|
||||
},
|
||||
async getorderList() {
|
||||
let res = await this.api.groupOrderInfo({
|
||||
page: this.form.page,
|
||||
size: this.form.size,
|
||||
userId: uni.cache.get('userInfo').id, //userId
|
||||
status: this.swiperCurrent
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list == 0) {
|
||||
this.is_end = true
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.groupList = [...this.groupList, ...res.data.list];
|
||||
this.form.status = 'loading';
|
||||
if (res.data.pageNum == res.data.pages) {
|
||||
this.form.status = 'nomore';
|
||||
} else {
|
||||
this.list = [...this.list, ...res.data];
|
||||
if (res.data.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -347,57 +203,10 @@
|
||||
$tabH: 80upx;
|
||||
$color: #ff411d;
|
||||
|
||||
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;
|
||||
height: $tabH;
|
||||
position: relative;
|
||||
background: #ffd158;
|
||||
padding: 48rpx 0 72rpx 0;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
@@ -406,15 +215,11 @@
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.line-wrap {
|
||||
position: absolute;
|
||||
bottom: 48rpx;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 8upx;
|
||||
@@ -422,22 +227,16 @@
|
||||
|
||||
.line {
|
||||
$h: 6upx;
|
||||
margin-top: 6rpx;
|
||||
// width: 30%;
|
||||
// height: $h;
|
||||
width: 30%;
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
// background-color: $color;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: $paddingSize;
|
||||
position: relative;
|
||||
margin-top: -24rpx;
|
||||
z-index: 99999;
|
||||
background: #f6f6f6;
|
||||
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
||||
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
@@ -540,60 +339,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,605 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
<text>{{listinfo.name}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<text> 待支付 </text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'send'">
|
||||
<text> 已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'cancelled'">
|
||||
<text>已取消</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
|
||||
</view>
|
||||
<view class="tag-wrap">
|
||||
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view v-if="listinfo.tableName">
|
||||
桌号:{{listinfo.tableName}}
|
||||
</view>
|
||||
<view class="number-wrap" style="margin-top: 20rpx;"
|
||||
v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.outNumber}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border" style="position: relative;">
|
||||
<text class="title">
|
||||
<text>点单详情</text>
|
||||
</text>
|
||||
|
||||
<view style="display: flex;align-items: center;"
|
||||
v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<!-- <text style="font-size:24rpx;">支付时间:</text> -->
|
||||
<uni-countdown :show-day="false" color="#ff0000" border-color="#00B26A" splitorColor="#000"
|
||||
:font-size="14" :hour="0" :minute="listinfo.expiredMinutes" :second="listinfo.expiredSeconds" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in listinfo.details" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.productImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n" v-if="item.productSkuName">{{item.productSkuName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.priceAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-wrap">
|
||||
<view class="price">
|
||||
<text>合计:</text>
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{listinfo.payAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border">
|
||||
<text class="title">订单信息</text>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="row" @click="copyHandle(listinfo.orderNo)">
|
||||
<text class="t">订单信息:</text>
|
||||
<text class="info">{{listinfo.orderNo}}(点击复制)</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="t">创建时间:</text>
|
||||
<text class="info">{{$u.timeFormat(listinfo.time, 'yyyy-mm-dd hh:MM:ss')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card" style="padding-bottom: 20rpx;" v-if="listinfo.shopQrcode">
|
||||
<image :src="listinfo.shopQrcode" show-menu-by-longpress="true" style="width: 100%;" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="payType" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<view class="">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="">
|
||||
<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
|
||||
placement="column">
|
||||
<u-radio activeColor="#ffd158" name="1">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
微信支付
|
||||
</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;">
|
||||
</view>
|
||||
<u-radio activeColor="#ffd158" name="2">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
会员卡支付</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;">
|
||||
会员卡余额{{ amountVIP?amountVIP.amount:0}} <text
|
||||
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
|
||||
@click="goRecharge">去充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview">
|
||||
<view class="flex-between" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额:
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{listinfo.payAmount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclickddes,500)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付密码 -->
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
orderId: '',
|
||||
listinfo: {},
|
||||
radiovalue: '1', //选择支付方式
|
||||
ispws: false,
|
||||
srcimge: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/wx.jpg'
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
this.orderId = e.orderId
|
||||
},
|
||||
onShow() {
|
||||
this.orderorderInfo()
|
||||
},
|
||||
onUnload() {
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
groupChange(n) { //选择支付方式
|
||||
this.radiovalue = n
|
||||
},
|
||||
mountedcreateSelectorQuery() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
console.log(ele, 111)
|
||||
that.height = (ele.height) + "px"
|
||||
that = null;
|
||||
// uni.getSystemInfo({
|
||||
// success(res) {
|
||||
|
||||
// }
|
||||
// })
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
async paymodfiyOrderInfo() {
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfo.orderId,
|
||||
})
|
||||
},
|
||||
showpopupclickddes() {
|
||||
// radiovalue为1是微信支付
|
||||
if (this.radiovalue == 1) {
|
||||
this.showpopupclick() //微信支付
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
// console.log(isPwd,'是否设置了支付密码')
|
||||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
async showpopupclick() {
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.orderId,
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.hideLoading()
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 500)
|
||||
this.paymodfiyOrderInfo()
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.hideLoading()
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 500)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// 余额支付
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.accountPay({
|
||||
orderId: this.listinfoid,
|
||||
memberId: this.amountVIP.id,
|
||||
// remark: this.remark,
|
||||
pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
// data ->1 支付成功
|
||||
// ->2 余额不足
|
||||
// ->3 未设置支付密码,
|
||||
// ->4 不是会员,
|
||||
if (res.data == 1) {
|
||||
this.showToastUppop('支付成功')
|
||||
let _this = this
|
||||
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
} else if (res.data == 2) {
|
||||
this.showToastUppop('余额不足')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
} else if (res.data == 3) {
|
||||
this.showToastUppop('未设置支付密码')
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
} else if (res.data == 4) {
|
||||
this.showToastUppop('非会员请充值')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
showToastUppop(title) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title,
|
||||
success: () => {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
async orderorderInfo() {
|
||||
let res = await this.api.orderorderInfo({
|
||||
orderId: this.orderId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.listinfo = res.data
|
||||
this.mountedcreateSelectorQuery()
|
||||
}
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.border {
|
||||
padding-bottom: 28upx;
|
||||
border-bottom: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 20upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10upx;
|
||||
color: $color-priamry;
|
||||
border: 1px solid $color-priamry;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fafafa;
|
||||
border-radius: 16upx;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 28upx 0;
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 28upx;
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 28upx;
|
||||
border-top: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 28upx;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.flex-between {
|
||||
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: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
<text>{{listinfo.name}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<text> 待支付 </text>
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
@@ -24,12 +24,11 @@
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'cancelled'">
|
||||
<text>已取消</text>
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
|
||||
</view>
|
||||
<view class="tag-wrap">
|
||||
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
|
||||
@@ -37,27 +36,16 @@
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view v-if="listinfo.tableName">
|
||||
桌号:{{listinfo.tableName}}
|
||||
</view>
|
||||
<view class="number-wrap" style="margin-top: 20rpx;"
|
||||
v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
|
||||
<view class="number-wrap" v-if="listinfo.status != 'unpaid' || listinfo.status != 'paying'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.outNumber}}</text>
|
||||
<text class="number">{{listinfo.tableName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border" style="position: relative;">
|
||||
<view class="head border">
|
||||
<text class="title">
|
||||
<text>点单详情</text>
|
||||
</text>
|
||||
|
||||
<view style="display: flex;align-items: center;"
|
||||
v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<!-- <text style="font-size:24rpx;">支付时间:</text> -->
|
||||
<uni-countdown :show-day="false" color="#ff0000" border-color="#00B26A" splitorColor="#000"
|
||||
:font-size="14" :hour="0" :minute="listinfo.expiredMinutes" :second="listinfo.expiredSeconds" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in listinfo.details" :key="index">
|
||||
@@ -66,10 +54,8 @@
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n" v-if="item.productSkuName">{{item.productSkuName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.priceAmount}}</text>
|
||||
@@ -101,8 +87,7 @@
|
||||
</view>
|
||||
|
||||
<view class="card" style="padding-bottom: 20rpx;" v-if="listinfo.shopQrcode">
|
||||
<image :src="listinfo.shopQrcode" show-menu-by-longpress="true" style="width: 100%;" mode="widthFix">
|
||||
</image>
|
||||
<image :src="listinfo.shopQrcode" show-menu-by-longpress="true" style="width: 100%;" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view :style="{height:height}">
|
||||
@@ -135,20 +120,18 @@
|
||||
pay_type: 1,
|
||||
orderId: '',
|
||||
listinfo: {},
|
||||
srcimge: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/wx.jpg'
|
||||
srcimge:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/wx.jpg'
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
this.orderId = e.orderId
|
||||
},
|
||||
onShow() {
|
||||
this.orderorderInfo()
|
||||
},
|
||||
onUnload() {
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
})
|
||||
onShow() {
|
||||
if (this.orderId) {
|
||||
this.orderorderInfo()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mountedcreateSelectorQuery() {
|
||||
@@ -192,35 +175,40 @@
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.hideLoading()
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 500)
|
||||
}, 2000)
|
||||
this.paymodfiyOrderInfo()
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/mall/order/ordersuccess?id=" + datareslane.data
|
||||
// .order_id,
|
||||
// });
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
|
||||
setTimeout(res => {
|
||||
uni.hideLoading()
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 500)
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
});
|
||||
@@ -280,7 +268,7 @@
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 20upx 0;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
|
||||
@@ -1,336 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-sticky bgColor="#fff">
|
||||
<view class="tab-wrap">
|
||||
<view class="item" v-for="(item, index) in tabs" :key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="line-wrap"
|
||||
:style="{ left: `${(100 / tabs.length) * active}%`, width: `${100 / tabs.length}%` }">
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="list-wrap">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" @click="orderinfo(item)">
|
||||
<view class="header-wrap">
|
||||
<text v-if="item.sendType == 'post'">快递</text>
|
||||
<text v-if="item.sendType == 'takeaway'">外卖</text>
|
||||
<text v-if="item.sendType == 'takeself'">自提</text>
|
||||
<text v-if="item.sendType == 'table'">堂食</text>
|
||||
<text class="status" v-if="item.status == 'unpaid' || item.status == 'paying'">
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'send'">
|
||||
<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 == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="shop-info">
|
||||
<view class="shop-item">
|
||||
<view class="cover flex-start" v-for="(item1,index1) in item.detailList" :key="index1">
|
||||
<!-- <image :src="item1.productImg" style="width: 200rpx;height: 200rpx; border-radius: 20rpx;" mode="widthFix"></image> -->
|
||||
<c-image width="200" height="200" radius="20" :src="item1.productImg"></c-image>
|
||||
</view>
|
||||
<!-- <view class="info">
|
||||
<text class="name">美味大宅蟹</text>
|
||||
<text class="num">数量:1</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="total">
|
||||
<text class="t">需付款</text>
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.orderAmount}}</text>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<text class="time">下单日期:{{$u.timeFormat(item.createdAt, 'yyyy-mm-dd hh:MM')}}</text>
|
||||
<text class="intro num">共{{item.totalNumber}}件商品 合计:¥{{item.orderAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="btn">
|
||||
<text>查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '../../uni_modules/uview-ui/libs/config/props/list';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
tabs: [{
|
||||
name: '全部',
|
||||
type: 1,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
name: '待支付',
|
||||
type: 2,
|
||||
status: 'unpaid'
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
type: 3,
|
||||
status: 'unsend'
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
type: 4,
|
||||
status: 'closed'
|
||||
},
|
||||
{
|
||||
name: '退款',
|
||||
type: 5,
|
||||
status: 'refund'
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
is_end: false,
|
||||
swiperCurrent: '',
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}
|
||||
if (this.tabs.findIndex((item) => item.type == this.useStorage.get('orderType')) == -1) {
|
||||
this.active = 0
|
||||
} else {
|
||||
this.active = (this.tabs.findIndex((item) => item.type == this.useStorage.get('orderType')));
|
||||
}
|
||||
this.init_fn()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.orderorderList()
|
||||
},
|
||||
methods: {
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
}
|
||||
},
|
||||
orderinfo(e) {
|
||||
uni.pro.navigateTo('order/order_detail', {
|
||||
orderId: e.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.orderorderList()
|
||||
},
|
||||
orderswitch(e, a) {
|
||||
this.active = a
|
||||
if (e.type == 1) {
|
||||
this.swiperCurrent = ''
|
||||
} else {
|
||||
this.swiperCurrent = e.status
|
||||
}
|
||||
this.init_fn()
|
||||
},
|
||||
async orderorderList() {
|
||||
let res = await this.api.orderorderList({
|
||||
page: this.form.page,
|
||||
size: this.form.size,
|
||||
userId: uni.cache.get('userInfo').id, //userId
|
||||
status: this.swiperCurrent
|
||||
})
|
||||
if (res.data.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data];
|
||||
if (res.data.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$tabH: 80upx;
|
||||
$color: #ff411d;
|
||||
|
||||
.tab-wrap {
|
||||
display: flex;
|
||||
height: $tabH;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.line-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 8upx;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
.line {
|
||||
$h: 6upx;
|
||||
width: 30%;
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: $paddingSize;
|
||||
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $paddingSize;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
padding: $paddingSize;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.status {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $paddingSize;
|
||||
|
||||
.shop-info {
|
||||
.shop-item {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
.cover:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
|
||||
// white-space: nowrap;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-weight: bold;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.i {
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
position: relative;
|
||||
top: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: $paddingSize;
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1upx solid #ececec;
|
||||
padding: $paddingSize;
|
||||
|
||||
.btn {
|
||||
padding: 8upx 24upx;
|
||||
border-radius: 100upx;
|
||||
border: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,413 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat class="navbar" :opacity='opacitys' :title='titlename' :titleshow='false'></navseat>
|
||||
<view class="onecontent">
|
||||
<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
|
||||
<view class="onecontentabsolute flex-center">
|
||||
<image class="onecontentabsoluteimage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dui.png" mode="aspectFill"></image>
|
||||
<view class="onecontentabsolutebox flex-colum-start">
|
||||
<text>支付成功!</text>
|
||||
<text style="margin-top: 16rpx;font-size: 24rpx;">感谢您的购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontent">
|
||||
<view class="towcontentone">
|
||||
¥{{orderInfo.orderAmount}}
|
||||
</view>
|
||||
<view class="towcontentow flex-between">
|
||||
<view class="towcontentow_O">
|
||||
订单编号:
|
||||
</view>
|
||||
<view class="towcontentow_T">
|
||||
{{orderInfo.orderNo}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentow flex-between">
|
||||
<view class="towcontentow_O">
|
||||
下单时间:
|
||||
</view>
|
||||
<view class="towcontentow_T">
|
||||
{{orderInfo.createdAt|createdAtfiter}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontentow flex-between">
|
||||
<view class="towcontentow_O">
|
||||
支付方式:
|
||||
</view>
|
||||
<view class="towcontentow_T">
|
||||
{{paytype==1?'微信支付':'余额支付'}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="towcontenthere flex-colum" v-if="orderinfo">
|
||||
<view class="towcontentherebox flex-center">
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhj.png" mode=""></image>
|
||||
<text>恭喜获得优惠券</text>
|
||||
</view>
|
||||
<view class="towcontenthereimage flex-colum">
|
||||
<view class="towcontenthereimageone">
|
||||
<text style="font-size:28rpx; color: #FF7C0D;">¥</text>
|
||||
{{orderinfo.couponsAmount}}
|
||||
</view>
|
||||
<view class="towcontenthereimagetow">
|
||||
通用红包券
|
||||
</view>
|
||||
<view class="towcontenthereimagethere">
|
||||
有效至 {{orderinfo.endTime}}
|
||||
</view>
|
||||
<view class="towcontenthereimagefour">
|
||||
限时红包变大 快来领取
|
||||
</view>
|
||||
<view class="towcontenthereimagefive flex-between">
|
||||
<view class="towcontenthereimagefiveone" @click="wantEvent">
|
||||
我在想想
|
||||
</view>
|
||||
<view class="towcontenthereimagefivetow" @click="DoublingEvent">
|
||||
马上翻倍
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
filters: {
|
||||
createdAtfiter(d) {
|
||||
const timestamp = d; // 待转换的时间戳
|
||||
const date = new Date(timestamp); // 根据时间戳创建Date对象
|
||||
const year = date.getFullYear(); // 获取年份
|
||||
const month = date.getMonth() + 1; // 获取月份,需要加1
|
||||
const day = date.getDate(); // 获取日期
|
||||
const hour = date.getHours(); // 获取小时
|
||||
const minute = date.getMinutes(); // 获取分钟
|
||||
const second = date.getSeconds(); // 获取秒数
|
||||
const formattedDate =
|
||||
`${year}-${month}-${day} ${hour<10? '0'+hour:hour}:${minute<10? '0'+minute:minute}:${second<10? '0'+second:second}`; // 拼接成格式化后的日期字符串
|
||||
return formattedDate
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
paytype: 1,
|
||||
titlename: '支付详情',
|
||||
orderId: "",
|
||||
opacitys: false,
|
||||
towcontentclickindex: 0,
|
||||
windowHeight: '',
|
||||
seighT: '',
|
||||
customheighttop: '', //top高度
|
||||
isFixedTop: false,
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
listbox: [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '美食正餐'
|
||||
},
|
||||
{
|
||||
name: '饮品小吃'
|
||||
}
|
||||
],
|
||||
orderinfo: null,
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
distance: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
},
|
||||
orderInfo: null
|
||||
};
|
||||
},
|
||||
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) {
|
||||
console.log(e,'调试1')
|
||||
this.paytype = e.radiovalue1
|
||||
this.orderId = e.orderId
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 1000)
|
||||
this.getinfo(e.orderId)
|
||||
this.orderInfo = JSON.parse(e.orderInfo)
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getinfo(id) {
|
||||
let res = await this.api.getYhqDouble({
|
||||
orderId: id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.orderinfo = res.data
|
||||
}
|
||||
},
|
||||
wantEvent() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + this.orderId
|
||||
});
|
||||
},
|
||||
async DoublingEvent() {
|
||||
let res = await this.api.yhqDouble({
|
||||
conponsId: this.orderinfo.id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.wantEvent()
|
||||
}
|
||||
},
|
||||
//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)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
towcontentclick(index) {
|
||||
this.towcontentclickindex = index
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {}
|
||||
|
||||
.content {
|
||||
|
||||
|
||||
.onecontent {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
// #ifdef APP-PLUS || H5
|
||||
height: 498.1rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/successful.png) no-repeat;
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/successfules.png) no-repeat;
|
||||
height: 586rpx;
|
||||
// #endif
|
||||
background-size: cover;
|
||||
|
||||
.onecontentabsolute {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.onecontentabsoluteimage {
|
||||
width: 98.53rpx;
|
||||
height: 93.63rpx;
|
||||
}
|
||||
|
||||
.onecontentabsolutebox {
|
||||
margin-left: 42rpx;
|
||||
|
||||
text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
top: -148rpx;
|
||||
margin: 0 auto;
|
||||
width: 630rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 0rpx 24rpx 24rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.towcontentone {
|
||||
padding-top: 26rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
font-size: 44rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontentow {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.towcontentow_O {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.towcontentow_T {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenthere {
|
||||
margin-top: 32rpx;
|
||||
border-top: 1rpx dashed #E5E5E5;
|
||||
|
||||
.towcontentherebox {
|
||||
margin-top: 48rpx;
|
||||
|
||||
image {
|
||||
width: 38.48rpx;
|
||||
height: 38.42rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 16rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontenthereimage {
|
||||
margin-top: 48rpx;
|
||||
width: 540rpx;
|
||||
height: 498rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhjs.png) no-repeat;
|
||||
background-size: cover;
|
||||
justify-content: flex-start;
|
||||
|
||||
.towcontenthereimageone {
|
||||
margin-top: 54rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
font-size: 48rpx;
|
||||
color: #FF7C0D;
|
||||
}
|
||||
|
||||
.towcontenthereimagetow {
|
||||
margin-top: 28rpx;
|
||||
width: 184rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background: rgba(255, 219, 151, 0.33);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #C7620E;
|
||||
}
|
||||
|
||||
.towcontenthereimagethere {
|
||||
margin-top: 8rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenthereimagefour {
|
||||
margin-top: 74rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.towcontenthereimagefive {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.towcontenthereimagefiveone {
|
||||
padding: 12rpx 28rpx;
|
||||
background: #FFF6D8;
|
||||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||||
border: 2rpx solid #FFE18F;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.towcontenthereimagefivetow {
|
||||
margin-left: 16rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(178deg, #FFFF81 0%, rgba(255, 76, 59, 0.56) 100%);
|
||||
box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(222, 91, 43, 0.65);
|
||||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -14rpx;
|
||||
left: -32rpx;
|
||||
width: 694rpx;
|
||||
height: 14rpx;
|
||||
background: #FFA556;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,543 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in cartLists.data" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.coverImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.name}}</text>
|
||||
<text class="n">{{item.skuName}}</text>
|
||||
<text class="n">x{{item.number}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.salePrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付密码 -->
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {object} from 'prop-types';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
remark: '',
|
||||
listinfo: {
|
||||
detailList: [],
|
||||
amount: '',
|
||||
amounts: ''
|
||||
},
|
||||
emitorderfoodform: {
|
||||
clickiconone: ''
|
||||
},
|
||||
orderInfo: '',
|
||||
// 可用优惠券数据
|
||||
couponAmount: 0,
|
||||
// 输入支付密码 123
|
||||
ispws: false,
|
||||
listinfoid: ''
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cartLists: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
amount: '0.00',
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
radiovalue: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
amountVIP: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
this.ispws = false
|
||||
},
|
||||
methods: {
|
||||
groupChange(n) {
|
||||
this.radiovalue = n
|
||||
},
|
||||
async getAount() {
|
||||
let res = await this.api.shopUserInfo({
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.amountVIP = res.data
|
||||
}
|
||||
},
|
||||
orderfoodindex() { //优惠劵
|
||||
uni.pro.navigateTo('index/coupons/index', {
|
||||
orderfood: 0,
|
||||
orderId: this.listinfoid,
|
||||
amount: this.listinfo.amounts
|
||||
})
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async paymodfiyOrderInfo() { //支付完成后请求
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfoid,
|
||||
})
|
||||
},
|
||||
goRecharge() { // 去充值
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: uni.cache.get('shopUser')
|
||||
})
|
||||
},
|
||||
showpopupclickddes(ID) {
|
||||
// radiovalue为1是微信支付
|
||||
this.listinfoid = ID
|
||||
if (this.radiovalue == 1) {
|
||||
this.showpopupclickdds() //微信支付
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
// console.log(isPwd,'是否设置了支付密码')
|
||||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 微信支付
|
||||
async showpopupclickdds() {
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfoid
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信支付还是余额支付
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
let _this = this
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
// uni.cache.set('shopUser', '') //删除shopUser
|
||||
_this.paymodfiyOrderInfo()
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 余额支付
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.accountPay({
|
||||
orderId: this.listinfoid,
|
||||
memberId: this.amountVIP.id,
|
||||
// remark: this.remark,
|
||||
pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
// data ->1 支付成功
|
||||
// ->2 余额不足
|
||||
// ->3 未设置支付密码,
|
||||
// ->4 不是会员,
|
||||
if (res.data == 1) {
|
||||
this.showToastUppop('支付成功')
|
||||
let _this = this
|
||||
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
} else if (res.data == 2) {
|
||||
this.showToastUppop('余额不足')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
} else if (res.data == 3) {
|
||||
this.showToastUppop('未设置支付密码')
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
} else if (res.data == 4) {
|
||||
this.showToastUppop('非会员请充值')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
showToastUppop(title) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title,
|
||||
success: () => {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
async mounted() {
|
||||
uni.getSystemInfo({
|
||||
success: (data) => {
|
||||
this.height = (data.windowHeight / 2) + "px";
|
||||
console.log(this.height, 1111);
|
||||
}
|
||||
})
|
||||
// //#ifdef MP-WEIXIN || H5
|
||||
// var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
// query.boundingClientRect(ele => {
|
||||
// var that = this;
|
||||
// that.height = (ele.height) + "px";
|
||||
// that = null;
|
||||
// }).exec();
|
||||
// //#endif
|
||||
// //#ifdef MP-ALIPAY
|
||||
// my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
// var nodeData = ele[0]
|
||||
// var that = this;
|
||||
// that.height = (nodeData.height) + "px";
|
||||
// that = null;
|
||||
// })
|
||||
// //#endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 28upx 28upx 28upx 28upx;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.border {
|
||||
padding-bottom: 28upx;
|
||||
border-bottom: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10upx;
|
||||
color: $color-priamry;
|
||||
border: 1px solid $color-priamry;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fafafa;
|
||||
border-radius: 16upx;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 28upx 0;
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 28upx;
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 28upx;
|
||||
border-top: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 28upx;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.redMoney {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 18rpx 14rpx;
|
||||
|
||||
>view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
background: #FFE9E9;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FF3333;
|
||||
text-align: center;
|
||||
padding: 9rpx 13rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
padding: 16rpx 34rpx;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.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_onethere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,813 +0,0 @@
|
||||
<template>
|
||||
|
||||
<view class="container">
|
||||
<view class="card" v-if="listinfo.tableName">
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
<text>{{listinfo.tableName || '空'}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid'">
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'send'">
|
||||
<text>已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="tag-wrap">
|
||||
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view class="number-wrap"
|
||||
v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.outNumber || '空'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" v-if="listinfoid && listinfo">
|
||||
<view class="head border">
|
||||
<text class="title">
|
||||
<text>点单详情</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in listinfo.details" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.productImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n" v-if="item.productSkuName">{{item.productSkuName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-wrap">
|
||||
<view class="price">
|
||||
<text>合计:</text>
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{listinfo.payAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" v-else>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in cartLists.data" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.coverImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.name}}</text>
|
||||
<text class="n">{{item.skuName}}</text>
|
||||
<text class="n">x{{item.number}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{item.salePrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sixcontent">
|
||||
<view class="sixcontentone flex-between" style="padding: 0 0;" @click="orderfoodindex">
|
||||
<view class="sixcontent_one" style="padding: 0 0;">
|
||||
优惠券
|
||||
</view>
|
||||
<text style="color: red;">{{emitorderfoodform.couponsPrice}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="redMoney">
|
||||
<view>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
|
||||
style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
|
||||
红包/抵用券
|
||||
</view>
|
||||
<view @click="orderfoodindex">
|
||||
可用优惠券{{couponAmount}}张
|
||||
</view>
|
||||
</view> -->
|
||||
<view style="padding: 0 20rpx;">
|
||||
<u--textarea v-model="remark" placeholder="备注"></u--textarea>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<view class="payType">
|
||||
<view class="">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="">
|
||||
<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
|
||||
placement="column">
|
||||
<u-radio activeColor="#ffd158" name="1">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
微信支付
|
||||
</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;">
|
||||
</view>
|
||||
<u-radio activeColor="#ffd158" name="2">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
会员卡支付</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;">
|
||||
会员卡余额{{ amountVIP?amountVIP.amount:0}} <text
|
||||
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
|
||||
@click="goRecharge">去充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sixcontent" >
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<u-icon name="weixin-fill" color="#999999" size="32"></u-icon>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<u-icon name="zhifubao" color="#999999" size="26"></u-icon>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview">
|
||||
<view class="flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额:
|
||||
</view>
|
||||
<view class="fixedview_onetow" v-if="listinfoid && listinfo">
|
||||
<text>¥</text>{{listinfo.payAmount}}
|
||||
</view>
|
||||
<view class="fixedview_onetow" v-else>
|
||||
<text>¥</text>{{cartLists.amount}}
|
||||
</view>
|
||||
<!-- <view class="fixedview_onethere" v-if="emitorderfoodform.couponsPrice">
|
||||
以优惠¥{{emitorderfoodform.couponsPrice}}
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo">
|
||||
立即付款
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(orderdetail, 500)" v-else>
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付密码 -->
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||||
<!-- 弹幕 -->
|
||||
<l-barrage ref="lBarrage" @end="onEnd" :minTop='0' :maxTop='16'></l-barrage>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {object} from 'prop-types';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
import lBarrage from '@/components/l-barrage/l-barrage.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword,
|
||||
lBarrage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
cartLists: {},
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
remark: '',
|
||||
listinfo: {
|
||||
detailList: [],
|
||||
amount: '',
|
||||
amounts: ''
|
||||
},
|
||||
emitorderfoodform: {
|
||||
clickiconone: ''
|
||||
},
|
||||
orderInfo: '',
|
||||
// 可用优惠券数据
|
||||
couponAmount: 0,
|
||||
// 输入支付密码 123
|
||||
ispws: false,
|
||||
listinfoid: null,
|
||||
radiovalue: '1',
|
||||
amountVIP: null
|
||||
};
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('getMessage')
|
||||
this.ispws = false
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('getMessage')
|
||||
},
|
||||
onShow() {
|
||||
uni.$on('message', this.getMessage)
|
||||
if (this.listinfoid) {
|
||||
this.orderorderInfo()
|
||||
} else {
|
||||
this.handlemessage()
|
||||
}
|
||||
// 获取余额
|
||||
this.getAount()
|
||||
},
|
||||
methods: {
|
||||
getMessage(msg) {
|
||||
if (msg == 1) { // 网络在连接
|
||||
return false
|
||||
}
|
||||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||||
return false
|
||||
}
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
return false;
|
||||
|
||||
} else {
|
||||
switch (msg.type) {
|
||||
case 'createOrder':
|
||||
console.log(msg.data)
|
||||
this.listinfoid = msg.data.id
|
||||
uni.$off('getMessage')
|
||||
this.orderorderInfo(1)
|
||||
break;
|
||||
case 'addCart':
|
||||
this.cartLists = msg
|
||||
break;
|
||||
case 'order':
|
||||
uni.navigateBack()
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '您的小伙伴已下单了哦~~'
|
||||
})
|
||||
}, 1000)
|
||||
break;
|
||||
case 'addcart':
|
||||
/*插入一条弹幕*/
|
||||
this.$refs.lBarrage.add(
|
||||
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
);
|
||||
break;
|
||||
}
|
||||
this.$set(this, 'cartLists', msg)
|
||||
}
|
||||
|
||||
},
|
||||
handlemessage() {
|
||||
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
|
||||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||||
tableId: uni.cache.get('tableCode'),
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
"type": "connect",
|
||||
})
|
||||
},
|
||||
// 数据处理
|
||||
socketSendMsg(data) {
|
||||
if (this.socketTicket) {
|
||||
this.socketTicket.send(data);
|
||||
}
|
||||
},
|
||||
onEnd() { //回调弹幕
|
||||
console.log('一波结束')
|
||||
},
|
||||
// 查询订单信息
|
||||
async orderorderInfo(i) {
|
||||
let res = await this.api.orderorderInfo({
|
||||
orderId: this.listinfoid
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.listinfo = res.data
|
||||
if (i == 1) { //请求完了详情在去调支付
|
||||
this.showpopupclickdd()
|
||||
}
|
||||
}
|
||||
},
|
||||
groupChange(n) {
|
||||
this.radiovalue = n
|
||||
},
|
||||
async getAount() {
|
||||
let res = await this.api.shopUserInfo({
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.amountVIP = res.data
|
||||
}
|
||||
},
|
||||
orderfoodindex() { //优惠劵
|
||||
uni.pro.navigateTo('index/coupons/index', {
|
||||
orderfood: 0,
|
||||
orderId: this.listinfoid,
|
||||
amount: this.listinfo.amounts
|
||||
})
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async paymodfiyOrderInfo() { //支付完成后请求
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfoid,
|
||||
})
|
||||
},
|
||||
goRecharge() { // 去充值
|
||||
// 判断是否绑定手机,只有下单时候有,会员列表肯定有
|
||||
// console.log(this.amountVIP.isVip, '调试1')
|
||||
if (this.amountVIP.isVip == 0) {
|
||||
// 跳转到开通页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: uni.cache.get('shopUser')
|
||||
})
|
||||
}
|
||||
},
|
||||
orderdetail() { // 直接生成订单
|
||||
let data = {
|
||||
"skuId": '',
|
||||
"num": '', //数量
|
||||
"type": "createOrder", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
"remark": this.remark,
|
||||
"couponsId": '', //优惠券ID,
|
||||
"isYhq": 0, // 是否使用优惠券( 1: 使用, 0: 不使用),
|
||||
"isBuyYhq": 0, // 是否购买优惠券( 1: 购买, 0: 不够买)
|
||||
"productId": '', //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
}
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
},
|
||||
showpopupclickdd() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// radiovalue为1是微信支付
|
||||
if (this.radiovalue == 1) {
|
||||
this.showpopupclickdds() //微信支付
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
// console.log(isPwd,'是否设置了支付密码')
|
||||
if (uni.cache.get('userInfo').isPwd == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 微信支付
|
||||
async showpopupclickdds() {
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfoid
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信支付还是余额支付
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
let _this = this
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
// uni.cache.set('shopUser', '') //删除shopUser
|
||||
_this.paymodfiyOrderInfo()
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 余额支付
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.accountPay({
|
||||
orderId: this.listinfoid,
|
||||
memberId: this.amountVIP.id,
|
||||
pwd: pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
// data ->1 支付成功
|
||||
// ->2 余额不足
|
||||
// ->3 未设置支付密码,
|
||||
// ->4 不是会员,
|
||||
if (res.data == 1) {
|
||||
this.showToastUppop('支付成功')
|
||||
let _this = this
|
||||
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfoid
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
} else if (res.data == 2) {
|
||||
this.showToastUppop('余额不足')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
} else if (res.data == 3) {
|
||||
this.showToastUppop('未设置支付密码')
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
} else if (res.data == 4) {
|
||||
this.showToastUppop('非会员请充值')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
showToastUppop(title) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title,
|
||||
success: () => {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
async mounted() {
|
||||
let rectInfo = await this.$u.getRect('.fixedview');
|
||||
console.log(rectInfo);
|
||||
this.height = rectInfo.height + "px"
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 28upx 28upx 28upx 28upx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.border {
|
||||
padding-bottom: 28upx;
|
||||
border-bottom: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10upx;
|
||||
color: $color-priamry;
|
||||
border: 1px solid $color-priamry;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fafafa;
|
||||
border-radius: 16upx;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 28upx 0;
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 28upx;
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 28upx;
|
||||
border-top: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 28upx;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.redMoney {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 18rpx 14rpx;
|
||||
|
||||
>view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
background: #FFE9E9;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FF3333;
|
||||
text-align: center;
|
||||
padding: 9rpx 13rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
padding: 16rpx 34rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.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_onethere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card" v-if="listinfo.tableName">
|
||||
<view class="card">
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
桌号:<text>{{listinfo.tableName || '空'}}</text>
|
||||
<text>{{listinfo.tableName || '空'}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid'">
|
||||
<text>待支付</text>
|
||||
@@ -15,7 +15,7 @@
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'send'">
|
||||
<text>已发</text>
|
||||
<text> 已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
@@ -36,10 +36,9 @@
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view class="number-wrap"
|
||||
v-if="listinfo.status != 'unpaid' && listinfo.status != 'paying'&& listinfo.status != 'cancelled'">
|
||||
<view class="number-wrap" v-if="listinfo.status != 'unpaid'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.outNumber || '空'}}</text>
|
||||
<text class="number">{{listinfo.tableName || '空'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
@@ -55,7 +54,6 @@
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n" v-if="item.productSkuName">{{item.productSkuName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
@@ -72,63 +70,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sixcontent">
|
||||
<view class="sixcontentone flex-between" style="padding: 0 0;" @click="orderfoodindex">
|
||||
<view class="sixcontent_one" style="padding: 0 0;">
|
||||
优惠券
|
||||
</view>
|
||||
<text style="color: red;">{{emitorderfoodform.couponsPrice}}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="redMoney">
|
||||
<view>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
|
||||
style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
|
||||
红包/抵用券
|
||||
</view>
|
||||
<view @click="orderfoodindex">
|
||||
可用优惠券{{couponAmount}}张
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <u--textarea v-model="remark" placeholder="订单备注" ></u--textarea> -->
|
||||
<!-- 支付方式 -->
|
||||
<view class="payType">
|
||||
<view class="">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="">
|
||||
<u-radio-group v-model="radiovalue1" iconPlacement="right" @change="groupChange" :size="28"
|
||||
placement="column">
|
||||
<u-radio activeColor="#ffd158" name="1">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
微信支付
|
||||
</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;">
|
||||
</view>
|
||||
<u-radio activeColor="#ffd158" name="2">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
会员卡支付</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;">
|
||||
会员卡余额{{ amountVIP?amountVIP.amount:0}} <text
|
||||
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
|
||||
@click="goRecharge">去充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sixcontent" >
|
||||
<view class="sixcontent" v-if="listinfo.status == 'unpaid'">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
@@ -146,7 +88,7 @@
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<!-- <view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<u-icon name="zhifubao" color="#999999" size="26"></u-icon>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
@@ -155,9 +97,9 @@
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
@@ -170,109 +112,58 @@
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{listinfo.amount}}
|
||||
</view>
|
||||
<view class="fixedview_onethere" v-if="emitorderfoodform.couponsPrice">
|
||||
以优惠¥{{emitorderfoodform.couponsPrice}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fixedview_tow" @tap="showpopupclickdd"> -->
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclickdd, 500)">
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付密码 -->
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
remark: '',
|
||||
listinfoid: '',
|
||||
listinfo: {
|
||||
detailList: [],
|
||||
amount: '',
|
||||
amounts: ''
|
||||
},
|
||||
emitorderfoodform: {
|
||||
clickiconone: ''
|
||||
},
|
||||
amountVIP: null,
|
||||
radiovalue1: '1',
|
||||
orderInfo: '',
|
||||
// 可用优惠券数据
|
||||
couponAmount: 0,
|
||||
// 输入支付密码 123
|
||||
ispws: false,
|
||||
info: {},
|
||||
listinfo: {}
|
||||
};
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
uni.$off('getMessage')
|
||||
this.ispws = false
|
||||
},
|
||||
// onUnload() {
|
||||
// uni.$off('createOrdermessage')
|
||||
// },
|
||||
onLoad(e) {
|
||||
this.listinfo = JSON.parse(e.tablelist)
|
||||
console.log(e,140)
|
||||
let res = JSON.parse(e.tableId)
|
||||
console.log(res)
|
||||
this.listinfo = res
|
||||
// uni.$on('createOrdermessage', res => {
|
||||
// console.log(1111111)
|
||||
// console.log(res)
|
||||
// this.listinfo = res
|
||||
// })
|
||||
// uni.$on('createOrdermessage', this.getMessagess)
|
||||
},
|
||||
onShow() {
|
||||
// 获取余额
|
||||
this.getAount()
|
||||
// uni.$on('createOrdermessage', res => {
|
||||
// console.log(1111111)
|
||||
// console.log(res)
|
||||
// this.listinfo = res
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
groupChange(n) {
|
||||
this.radiovalue1 = n
|
||||
},
|
||||
async getcoupon() {
|
||||
let res = await this.api.userCoupon({
|
||||
"orderNum": this.listinfo.amount,
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.couponAmount = res.data
|
||||
}
|
||||
},
|
||||
async getAount() {
|
||||
let res = await this.api.shopUserInfo({
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"userId": uni.cache.get('userInfo').id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.amountVIP = res.data
|
||||
}
|
||||
},
|
||||
getMessage(msg) {
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
this.socketTicket.Close()
|
||||
uni.$off('getMessage')
|
||||
|
||||
} else if (msg.type == 'createOrder') {
|
||||
this.listinfoid = msg.data.id //下单需要的id
|
||||
this.orderInfo = msg.data
|
||||
if (this.radiovalue1 == 1) {
|
||||
// this.showpopupclickdds() //微信支付
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
orderfoodindex() { //优惠劵
|
||||
uni.pro.navigateTo('index/coupons/index', {
|
||||
orderfood: 0,
|
||||
orderId: this.listinfo.id,
|
||||
amount: this.listinfo.amounts
|
||||
async ordercreatOrder() {
|
||||
let res = await this.api.ordercreatOrder({
|
||||
tableId: this.info.tableId,
|
||||
shopId: this.info.shopId,
|
||||
userId: this.info.userId
|
||||
})
|
||||
this.listinfo = res.data
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
@@ -285,42 +176,22 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
async paymodfiyOrderInfo() { //支付完成后请求
|
||||
async paymodfiyOrderInfo() {
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfo.id,
|
||||
})
|
||||
},
|
||||
goRecharge() { // 去充值
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: uni.cache.get('shopUser')
|
||||
})
|
||||
},
|
||||
showpopupclickdd() {
|
||||
// radiovalue1为1是微信支付
|
||||
if (this.radiovalue1 == 1) {
|
||||
this.showpopupclickdds() //微信支付
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
let {
|
||||
isPwd
|
||||
} = uni.cache.get('userInfo')
|
||||
// console.log(isPwd,'是否设置了支付密码')
|
||||
if (isPwd == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 微信支付
|
||||
async showpopupclickdds() {
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfo.id
|
||||
})
|
||||
},
|
||||
async showpopupclick() {
|
||||
// const data = { //定义socket数据传参
|
||||
// "skuId": res.data.id,
|
||||
// "num": a == '-' ? Number(b) - 1 : Number(b) + 1, //数量
|
||||
// "type": "addcart", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
// "productId": item.id, //商品id
|
||||
// "shopId": uni.cache.get('shopUser').shopId,
|
||||
// "userId": uni.cache.get('userInfo').id
|
||||
// };
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfo.id,
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
@@ -328,107 +199,49 @@
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信支付还是余额支付
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
let _this = this
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
// uni.cache.set('shopUser', '') //删除shopUser
|
||||
_this.paymodfiyOrderInfo()
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' +
|
||||
_this
|
||||
.listinfo.id
|
||||
});
|
||||
},
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + this
|
||||
.listinfo.id
|
||||
});
|
||||
}, 1000)
|
||||
this.paymodfiyOrderInfo()
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/mall/order/ordersuccess?id=" + datareslane.data
|
||||
// .order_id,
|
||||
// });
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + this.listinfo.id
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
// 余额支付
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.accountPay({
|
||||
orderId: this.listinfo.id,
|
||||
memberId: this.amountVIP.id,
|
||||
// remark: this.remark,
|
||||
pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
// data ->1 支付成功
|
||||
// ->2 余额不足
|
||||
// ->3 未设置支付密码,
|
||||
// ->4 不是会员,
|
||||
if (res.data == 1) {
|
||||
this.showToastUppop('支付成功')
|
||||
let _this = this
|
||||
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
|
||||
complete() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + _this
|
||||
.listinfo.id
|
||||
});
|
||||
},
|
||||
})
|
||||
|
||||
} else if (res.data == 2) {
|
||||
this.showToastUppop('余额不足')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
} else if (res.data == 3) {
|
||||
this.showToastUppop('未设置支付密码')
|
||||
setTimeout(() => {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
} else if (res.data == 4) {
|
||||
this.showToastUppop('非会员请充值')
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
showToastUppop(title) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title,
|
||||
success: () => {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
@@ -437,6 +250,11 @@
|
||||
var that = this;
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
// uni.getSystemInfo({
|
||||
// success(res) {
|
||||
|
||||
// }
|
||||
// })
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
@@ -460,7 +278,7 @@
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 48rpx;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
@@ -576,10 +394,6 @@
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
@@ -612,68 +426,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.redMoney {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 18rpx 14rpx;
|
||||
|
||||
>view:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
background: #FFE9E9;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FF3333;
|
||||
text-align: center;
|
||||
padding: 9rpx 13rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
padding: 16rpx 34rpx;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
@@ -694,13 +456,6 @@
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_onethere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="t1">点击下方链接体验</view>
|
||||
<navigator url="goodsList_scroll" hover-class="hover">
|
||||
<view class="title">
|
||||
<text>滚动式联动</text>
|
||||
<text class="link">立即体验</text></view>
|
||||
<view class="content">
|
||||
<view>
|
||||
优点:滚动流畅度很好,全平台兼容
|
||||
</view>
|
||||
<view>
|
||||
缺点:因为需要计算高度的原因,需要在页面初始化时将所有商品信息返回,若是有大量的数据,不太建议这样做,会影响到打开时的加载速度
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
<navigator url="goodsList_swiper" hover-class="hover">
|
||||
<view class="title">
|
||||
<text>轮播式联动</text>
|
||||
<text class="link">立即体验</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
优点:左侧导航与主内容区域联动性好且可以随意调整右侧内容的高度
|
||||
</view>
|
||||
<view>
|
||||
缺点:因H5平台浏览器众多,体验欠佳,不建议在H5平台使用。
|
||||
<text style="color: red;">双向联动有BUG,仅支持左侧联动</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
<view class="t2">
|
||||
<view>因数据不可控的原因,请各位开发者们选择适合自己的模板使用,各有优缺点,选择适合自己的才是最好的。</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.t1{
|
||||
padding-top: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
color: #e50000;
|
||||
}
|
||||
.t2{
|
||||
padding: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ee0000;
|
||||
|
||||
>view{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
navigator{
|
||||
font-size: 28rpx;
|
||||
margin: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border:#e5e5e5 solid 1px;
|
||||
|
||||
.title{
|
||||
padding-bottom: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom:#e5e5e5 solid 1px;
|
||||
color:#333;
|
||||
font-size: 32rpx;
|
||||
|
||||
.link{
|
||||
color: #09f;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
line-height: 48rpx;
|
||||
color:#999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,378 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部面板 -->
|
||||
<view class="top--panel">
|
||||
<!-- 顶部面板,可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||
<view>这里顶部内容占位区域,不需要则删除</view>
|
||||
<view>可添加需放在页面顶部的内容,比如banner图</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滚动区域 -->
|
||||
<view class="scroll-panel" id="scroll-panel">
|
||||
<view class="list-box">
|
||||
<view class="left">
|
||||
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
|
||||
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||
<view class="item" v-for="(item,index) in leftArray" :key="index"
|
||||
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
|
||||
@tap="leftTap">{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
|
||||
:scroll-into-view="scrollInto" :scroll-with-animation="false">
|
||||
<view class="item main-item" v-for="(item,index) in mainArray" :key="index" :id="'item-'+index">
|
||||
<view class="title">
|
||||
<view>{{item.title}}</view>
|
||||
</view>
|
||||
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
|
||||
<image src="@/static/1.gif" mode=""></image>
|
||||
<view>
|
||||
<view>第{{index2+1}}个商品标题</view>
|
||||
<view class="describe">第{{index2+1}}个商品的描述内容</view>
|
||||
<view class="money">第{{index2+1}}个商品的价格</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部面板 底部面板,可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
|
||||
<!-- <view class="bottom-panel">
|
||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||
<view>这里底部内容占位区域,不需要则删除</view>
|
||||
<view>可添加需放在页面底部的内容,比如购物车栏目</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollHeight: 400,
|
||||
scrollTopSize: 0, //距离顶部的高度
|
||||
fillHeight: 0, // 填充高度,用于最后一项低于滚动区域时使用
|
||||
leftArray: [],
|
||||
mainArray: [],
|
||||
topArr: [],
|
||||
leftIndex: 0,
|
||||
scrollInto: '',
|
||||
isFixed: true
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
console.log(e)
|
||||
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
|
||||
this.isFixed = false;
|
||||
} else {
|
||||
this.isFixed = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/* 计算左侧滚动位置定位 */
|
||||
leftIntoView() {
|
||||
return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
/* 在非H5平台,nextTick回调后有概率获取到错误的元素高度,则添加200ms的延迟来减少BUG的产生 */
|
||||
setTimeout(() => {
|
||||
/* 等待滚动区域初始化完成 */
|
||||
this.initScrollView().then(() => {
|
||||
/* 获取列表数据,你的代码从此处开始 */
|
||||
this.getListData();
|
||||
})
|
||||
}, 100);
|
||||
},
|
||||
methods: {
|
||||
/* 初始化滚动区域 */
|
||||
initScrollView() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let view = uni.createSelectorQuery().select('#scroll-panel');
|
||||
view.boundingClientRect(res => {
|
||||
this.scrollTopSize = res.top;
|
||||
this.scrollHeight = 812;
|
||||
console.log(res, res.top, res.height)
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 100);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/* 获取列表数据 */
|
||||
getListData() {
|
||||
// Promise 为 ES6 新增的API ,有疑问的请自行学习该方法的使用。
|
||||
new Promise((resolve, reject) => {
|
||||
/* 因无真实数据,当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||
uni.showLoading();
|
||||
|
||||
// 模拟数据
|
||||
let mockData = () => {
|
||||
let [left, main] = [
|
||||
[],
|
||||
[]
|
||||
];
|
||||
|
||||
let size = Math.floor(Math.random() * 40);
|
||||
size = size < 20 ? 20 : size;
|
||||
for (let i = 0; i < size; i++) {
|
||||
left.push(`${i+1}类商品`);
|
||||
|
||||
let list = [];
|
||||
let r = Math.floor(Math.random() * 10);
|
||||
r = r < 5 ? 5 : r;
|
||||
for (let j = 0; j < r; j++) {
|
||||
list.push(j);
|
||||
}
|
||||
main.push({
|
||||
title: `第${i+1}类商品标题`,
|
||||
list
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
left,
|
||||
main
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
let res = mockData();
|
||||
let {
|
||||
left,
|
||||
main
|
||||
} = res;
|
||||
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
|
||||
resolve({
|
||||
left,
|
||||
main
|
||||
});
|
||||
}, 1000);
|
||||
}).then((res) => {
|
||||
console.log('-----------请求接口返回数据示例-------------');
|
||||
console.log(res);
|
||||
|
||||
uni.hideLoading();
|
||||
this.leftArray = res.left;
|
||||
this.mainArray = res.main;
|
||||
|
||||
// DOM 挂载后 再调用 getElementTop 获取高度的方法。
|
||||
setTimeout(() => {
|
||||
this.getElementTop();
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
/* 获取元素顶部信息 */
|
||||
getElementTop() {
|
||||
new Promise((resolve, reject) => {
|
||||
let view = uni.createSelectorQuery().selectAll('.main-item');
|
||||
view.boundingClientRect(data => {
|
||||
resolve(data);
|
||||
}).exec();
|
||||
}).then((res) => {
|
||||
let topArr = res.map((item) => {
|
||||
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
|
||||
});
|
||||
this.topArr = topArr;
|
||||
|
||||
/* 获取最后一项的高度,设置填充高度。判断和填充时做了 +-20 的操作,是为了滚动时更好的定位 */
|
||||
let last = res[res.length - 1].height;
|
||||
if (last - 20 < this.scrollHeight) {
|
||||
this.fillHeight = this.scrollHeight - last + 20;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 主区域滚动监听 */
|
||||
mainScroll(e) {
|
||||
// 节流方法
|
||||
clearTimeout(this.mainThrottle);
|
||||
this.mainThrottle = setTimeout(() => {
|
||||
scrollFn();
|
||||
}, 10);
|
||||
|
||||
let scrollFn = () => {
|
||||
let top = e.detail.scrollTop;
|
||||
let index = 0;
|
||||
/* 查找当前滚动距离 */
|
||||
for (let i = (this.topArr.length - 1); i >= 0; i--) {
|
||||
/* 在部分安卓设备上,因手机逻辑分辨率与rpx单位计算不是整数,滚动距离与有误差,增加2px来完善该问题 */
|
||||
if ((top + 2) >= this.topArr[i]) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftIndex = (index < 0 ? 0 : index);
|
||||
}
|
||||
},
|
||||
/* 左侧导航点击 */
|
||||
leftTap(e) {
|
||||
let index = e.currentTarget.dataset.index;
|
||||
this.scrollInto = `item-${index}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
|
||||
&>view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-panel {
|
||||
flex-grow: 1;
|
||||
// height: 0;
|
||||
// overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
.left {
|
||||
width: 200rpx;
|
||||
background-color: #f6f6f6;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
|
||||
.item {
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
&+.item {
|
||||
margin-top: 1px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
border-top: #d6d6d6 solid 1px;
|
||||
width: 620upx;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
/* 1px像素 */
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #42b983;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-left: #42b983 solid 4px;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill-last {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: #fff;
|
||||
padding-left: 20rpx;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
|
||||
.title {
|
||||
line-height: normal;
|
||||
padding: 30rpx 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 19;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: #eee solid 1px;
|
||||
}
|
||||
|
||||
.goods {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
&+.goods {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
&>image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.describe {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 24rpx;
|
||||
color: #efba21;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,323 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部面板 -->
|
||||
<view class="top--panel">
|
||||
<!-- 顶部面板,可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||
<view>这里顶部内容占位区域,不需要则删除</view>
|
||||
<view>可添加需放在页面顶部的内容,比如banner图</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 滚动区域 -->
|
||||
<view class="scroll-panel" id="scroll-panel">
|
||||
<view class="list-box">
|
||||
<view class="left">
|
||||
<scroll-view scroll-y="true"
|
||||
:style="{ 'height':scrollHeight }"
|
||||
:scroll-into-view="leftIntoView"
|
||||
:scroll-with-animation="true"
|
||||
>
|
||||
<view class="item"
|
||||
v-for="(item,index) in leftArray"
|
||||
:key="index"
|
||||
:class="{ 'active':index==leftIndex }"
|
||||
:id="'left-'+index"
|
||||
:data-index="index"
|
||||
@tap="leftTap"
|
||||
>{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<swiper class="swiper" :style="{ 'height':scrollHeight }"
|
||||
:current="leftIndex" @change="swiperChange"
|
||||
:vertical="true" duration="200" :disable-touch="true">
|
||||
<swiper-item v-for="(item,index) in mainArray" :key="index">
|
||||
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
<view>{{item.title}}</view>
|
||||
</view>
|
||||
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
|
||||
<image src="/static/logo.png" mode=""></image>
|
||||
<view>
|
||||
<view>第{{index2+1}}个商品标题</view>
|
||||
<view class="describe">第{{index2+1}}个商品的描述内容</view>
|
||||
<view class="money">第{{index2+1}}个商品的价格</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部面板 -->
|
||||
<view class="bottom-panel">
|
||||
<!-- 底部面板,可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
|
||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
||||
<view>这里底部内容占位区域,不需要则删除</view>
|
||||
<view>可添加需放在页面底部的内容,比如购物车栏目</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollHeight:'400px',
|
||||
leftArray:[],
|
||||
mainArray:[],
|
||||
leftIndex:0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
/* 计算左侧滚动位置定位 */
|
||||
leftIntoView(){
|
||||
return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
|
||||
}
|
||||
},
|
||||
onReady(){
|
||||
/* 在非H5平台,nextTick回调后有概率获取到错误的元素高度,则添加200ms的延迟来减少BUG的产生 */
|
||||
setTimeout(()=>{
|
||||
/* 等待滚动区域初始化完成 */
|
||||
this.initScrollView().then(()=>{
|
||||
/* 获取列表数据,你的代码从此处开始 */
|
||||
this.getListData();
|
||||
})
|
||||
},100);
|
||||
},
|
||||
methods: {
|
||||
/* 初始化滚动区域 */
|
||||
initScrollView(){
|
||||
return new Promise((resolve, reject)=>{
|
||||
let view = uni.createSelectorQuery().select('#scroll-panel');
|
||||
view.boundingClientRect(res => {
|
||||
this.scrollHeight = `${res.height}px`;
|
||||
setTimeout(()=>{
|
||||
resolve();
|
||||
},100);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/* 获取列表数据 */
|
||||
getListData(){
|
||||
// Promise 为 ES6 新增的API ,有疑问的请自行学习该方法的使用。
|
||||
new Promise((resolve,reject)=>{
|
||||
/* 因无真实数据,当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||
uni.showLoading();
|
||||
setTimeout(()=>{
|
||||
/* 因无真实数据,当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||
uni.showLoading();
|
||||
|
||||
// 模拟数据
|
||||
let mockData = ()=>{
|
||||
let [left,main]=[[],[]];
|
||||
|
||||
let size = Math.floor(Math.random()*40);
|
||||
size = size < 20 ? 20 : size;
|
||||
for(let i=0;i<size;i++){
|
||||
left.push(`${i+1}类商品`);
|
||||
|
||||
let list=[];
|
||||
let r = Math.floor(Math.random()*10);
|
||||
r = r < 20 ? 20 : r;
|
||||
for(let j=0;j<r;j++){
|
||||
list.push(j);
|
||||
}
|
||||
main.push({
|
||||
title:`第${i+1}类商品标题`,
|
||||
list
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
left,
|
||||
main
|
||||
}
|
||||
}
|
||||
setTimeout(()=>{
|
||||
let res = mockData();
|
||||
let {left,main} = res;
|
||||
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
|
||||
resolve({left,main});
|
||||
},1000);
|
||||
},1000);
|
||||
}).then((res)=>{
|
||||
console.log('-----------请求接口返回数据示例-------------');
|
||||
console.log(res);
|
||||
|
||||
uni.hideLoading();
|
||||
this.leftArray=res.left;
|
||||
this.mainArray=res.main;
|
||||
});
|
||||
},
|
||||
/* 左侧导航点击 */
|
||||
leftTap(e){
|
||||
let index=e.currentTarget.dataset.index;
|
||||
this.leftIndex=Number(index);
|
||||
},
|
||||
/* 轮播图切换 */
|
||||
swiperChange(e){
|
||||
let index=e.detail.current;
|
||||
this.leftIndex=Number(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
height: 100vh;
|
||||
}
|
||||
.container{
|
||||
height: 100%;
|
||||
}
|
||||
/* 容器 */
|
||||
.container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
|
||||
&>view{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-panel{
|
||||
flex-grow: 1;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bottom-panel{
|
||||
padding-bottom: 0;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.list-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
font-size: 28rpx;
|
||||
|
||||
.left{
|
||||
width: 200rpx;
|
||||
background-color: #f6f6f6;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
|
||||
.item{
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
& + .item{
|
||||
margin-top: 1px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
border-top: #d6d6d6 solid 1px;
|
||||
width: 620upx;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
transform:scaleY(0.5); /* 1px像素 */
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: #42b983;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-left: #42b983 solid 4px;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill-last{
|
||||
height: 0;
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.main{
|
||||
background-color: #fff;
|
||||
padding-left: 20rpx;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
|
||||
.title{
|
||||
line-height: normal;
|
||||
padding: 30rpx 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 19;
|
||||
}
|
||||
|
||||
.item{
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: #eee solid 1px;
|
||||
}
|
||||
|
||||
.goods{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
& + .goods{
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
& > image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.describe{
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.money{
|
||||
font-size: 24rpx;
|
||||
color: #efba21;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,22 +1,16 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view v-if="fixedtrue"
|
||||
style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
|
||||
<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
|
||||
<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
|
||||
<!-- <u-loadmore status="loading" fontSize="50" iconSize="30"/> -->
|
||||
</view>
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(2)">
|
||||
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
|
||||
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -65,22 +59,13 @@
|
||||
空
|
||||
</view>
|
||||
<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
|
||||
<view class="cover langcover" style="width:180rpx; height: 180rpx;"
|
||||
@click.stop="clickspecifications(item1,index,index1)">
|
||||
<!-- <c-image style="position: absolute;z-index:2;"
|
||||
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
|
||||
height="180"></c-image> -->
|
||||
<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
|
||||
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
|
||||
:lazy-load='true'></image>
|
||||
<view class="cover" style="width:180rpx; height: 180rpx;">
|
||||
<c-image :src="item1.coverImg" width="180" height="180"></c-image>
|
||||
</view>
|
||||
<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
|
||||
<view class="info " style="display: flex;flex-direction: column;justify-content: center;">
|
||||
<view class="name">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
<view class="namess" v-if="item1.suit>1">
|
||||
起售:{{ item1.suit }}
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="i">¥</text>
|
||||
@@ -88,19 +73,19 @@
|
||||
<text class="i">起</text>
|
||||
</view>
|
||||
<view class="sku-wrap" v-if="item1.productSkuResult != null"
|
||||
@click.stop="clickspecifications(item1,index,index1)">
|
||||
@click="clickspecifications(item1,index,index1)">
|
||||
<text class="t">选规格</text>
|
||||
<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber}}</text>
|
||||
</view>
|
||||
<view class="operation-wrap" v-else>
|
||||
<view class="btn" v-if="item1.cartNumber != '0'"
|
||||
@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
|
||||
@click="cartadd(item1,index,index1,'-',item1.cartNumber,item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
||||
</view>
|
||||
<text class="num">{{ item1.cartNumber }}</text>
|
||||
<view class="btn"
|
||||
@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
|
||||
@click="cartadd(item1,index,index1,'+',item1.cartNumber,item1.productSkuResult == null ? '单规格':'')">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -110,24 +95,23 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-wrap" v-if="cartListsdatashow">
|
||||
<view class="cart-wrap">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
||||
mode="aspectFit" @click="showCart = !showCart">
|
||||
<image class="icon" src="../../static/icon_cart.png" mode="aspectFit" @click="showCart = !showCart">
|
||||
</image>
|
||||
<text class="i">¥</text>
|
||||
<text class="num">{{cartLists.amount||'0.00'}}</text>
|
||||
<text class="num">{{cartLists.amount}}</text>
|
||||
</view>
|
||||
<view class="btn" @tap="$u.debounce(orderdetail, 500)">
|
||||
<text class="t">提交订单</text>
|
||||
<text class="t">去结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showCart" :round="20" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false">
|
||||
<view class="cart-list-wrap">
|
||||
<view class="cart-header">
|
||||
<view class="clear" @click="cartclear">
|
||||
<view class="cart-header" @click="cartclear">
|
||||
<view class="clear">
|
||||
<u-icon name="trash" color="#999"></u-icon>
|
||||
<text class="t">清空购物车</text>
|
||||
</view>
|
||||
@@ -177,7 +161,7 @@
|
||||
<view class="col">
|
||||
<text class="t">{{ shopList.storeInfo.businessTime }}</text>
|
||||
</view>
|
||||
<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
|
||||
<view class="col">
|
||||
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
@@ -193,17 +177,12 @@
|
||||
<u-popup :show="showShopsku" :round="20" mode="center" @close="showShopsku = false"
|
||||
:safeAreaInsetBottom='false'>
|
||||
<view class="shop_sku">
|
||||
<view class="positionabsolute">
|
||||
<u-icon name="close-circle-fill" @click="showShopsku = false" color="#a3aaa3" size="60"></u-icon>
|
||||
</view>
|
||||
<image class="shop_skucimage" :src="specifications.coverImg" mode="widthFix"></image>
|
||||
<view class="shop_sku_name">
|
||||
{{specifications.name}}
|
||||
</view>
|
||||
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
|
||||
v-if="specifications.tagSnap">
|
||||
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index">
|
||||
<view class="shop_sku_box_name">
|
||||
{{item.name}}
|
||||
<!-- 温度 -->{{item.name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
|
||||
@@ -213,7 +192,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
|
||||
<view class="shop_skuselect flex-start">
|
||||
已选规格:<view class="shop_skuselectname">{{skuidname.toString()}}</view>
|
||||
</view>
|
||||
<view class="shop_bottom flex-between">
|
||||
@@ -224,41 +203,29 @@
|
||||
</view>
|
||||
<view class="operation-wrap">
|
||||
<view class="btn"
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.cartNumber)">
|
||||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
||||
</view>
|
||||
<text class="num">{{amountcartNumber}}</text>
|
||||
<view class="btn"
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
|
||||
@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.cartNumber)">
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import webSocketUtils from '@/common/js/websocket.js';
|
||||
import orderdetail from '@/pages/order_detail/index';
|
||||
import lBarrage from '@/components/l-barrage/l-barrage.vue'
|
||||
import navbar from '../../uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
components: {
|
||||
orderdetail,
|
||||
lBarrage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
// #ifndef MP-WEIXIN
|
||||
menuInfo: uni.getSystemInfo(),
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
// #endif
|
||||
paddingBtmSize: 6,
|
||||
tabHeadHeight: 50,
|
||||
isFixed: false,
|
||||
@@ -272,18 +239,11 @@
|
||||
tableCode: '', //code,
|
||||
specifications: {},
|
||||
skuidname: [],
|
||||
cartLists: {}, //购物车
|
||||
orderdetailcartLists: {}, //提交订单
|
||||
cartLists: {},
|
||||
socketTicket: null,
|
||||
amountcartNumber: 0,
|
||||
skuidsearch: '', //
|
||||
salePrice: '', //钱数
|
||||
fixedtrue: true,
|
||||
datasocket: {}, //储存传参数据
|
||||
radiovalue: '1', //选择支付方式
|
||||
amountVIP: null, //余额
|
||||
barrageavatar: '', //弹幕头像
|
||||
cartListsdatashow: false //是否显示购物车
|
||||
salePrice: '' //钱数
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -303,170 +263,102 @@
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
uni.$on('message', this.getMessage)
|
||||
// this.tableCode = e.tableCode
|
||||
// this.scanCodehandle(e.tableCode)
|
||||
if (e.q) {
|
||||
this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
||||
this.scanCodehandle(e.q)
|
||||
} else {
|
||||
this.tableCode = e.tableCode
|
||||
uni.cache.set('tableCode', this.tableCode)
|
||||
this.handlemessage()
|
||||
}
|
||||
uni.cache.set('types', 'types');
|
||||
this.$nextTick(() => {
|
||||
this.countTitleTopNum(); //导航栏
|
||||
this.countTitleTopNum();
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
this.fixedtrue = true
|
||||
},
|
||||
onShow() {
|
||||
if (!uni.cache.get('token')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
rawData: infoRes.rawData
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
}
|
||||
},
|
||||
fail: (err) => {}
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEnd() { //回调弹幕
|
||||
console.log('一波结束')
|
||||
},
|
||||
// 单独获取他的shopUserid
|
||||
async productqueryShopIdByTableCode() {
|
||||
let res = await this.api.productqueryShopIdByTableCode({
|
||||
code: uni.cache.get('tableCode')
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('shopUser', res.data)
|
||||
this.handlemessage() //监听websocket返回
|
||||
// this.productqueryProduct() //list 数据
|
||||
getMessage(msg) {
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
uni.navigateBack()
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.pro.switchTab('index/index')
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
getMessage(msg) { //wss 回显数据
|
||||
if (msg == 1) { // 网络在连接
|
||||
this.fixedtrue = true
|
||||
return false
|
||||
}
|
||||
this.fixedtrue = false
|
||||
if (msg.type == 'heartbeat') { //后台心跳 处理返回 不然控制台一直报错
|
||||
return false
|
||||
}
|
||||
try {
|
||||
if (msg.status != 'success') {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
uni.navigateBack()
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
switch (msg.type) {
|
||||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||||
this.$set(this, 'amountcartNumber', msg.amount)
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'clearCart':
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
}, 500)
|
||||
break;
|
||||
case 'order':
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'addCart': //初始化add
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'addcart':
|
||||
this.cartLists = msg
|
||||
console.log(msg, 1111)
|
||||
this.productqueryProduct() //list 数据
|
||||
try {
|
||||
if (msg.data.length != 0) {
|
||||
let nums = 0
|
||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
if (item.skuId == this.skuidsearch) {
|
||||
nums = item.number
|
||||
}
|
||||
})
|
||||
this.$set(this, 'amountcartNumber', nums)
|
||||
switch (msg.type) {
|
||||
case 'sku': // sku 数量
|
||||
this.$set(this, 'amountcartNumber', msg.amount)
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'clearCart':
|
||||
console.log('clearCart')
|
||||
this.specifications.duoguge = ''
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '清空购物车成功',
|
||||
icon: "none",
|
||||
})
|
||||
}, 1000)
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'order':
|
||||
console.log('clearCart')
|
||||
this.specifications.duoguge = ''
|
||||
this.skuidname = []
|
||||
this.showCart = false
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'createOrder': //去结算
|
||||
// uni.$emit('createOrdermessage', msg.data)
|
||||
let item = JSON.stringify(msg.data)
|
||||
uni.redirectTo({
|
||||
url: '/pages/order_detail/order_detail?tableId=' + item
|
||||
});
|
||||
break;
|
||||
case 'addcart':
|
||||
console.log('addcart', 315)
|
||||
this.cartLists = msg
|
||||
if (msg.data.length != 0) {
|
||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
console.log(item.skuId, 111111, this.skuidsearch)
|
||||
if (item.skuId == this.skuidsearch) {
|
||||
this.$set(this, 'amountcartNumber', item.number)
|
||||
} else {
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
try {
|
||||
this.barrageavatar = msg.reqData.headImg
|
||||
/*插入一条弹幕*/
|
||||
this.$refs.lBarrage.add(
|
||||
`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
|
||||
);
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
break;
|
||||
}
|
||||
console.log(this.cartLists.data, 1111111)
|
||||
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
||||
})
|
||||
} else {
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
default:
|
||||
console.log('default', 320)
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
handlemessage() {
|
||||
this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
|
||||
this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
|
||||
tableId: uni.cache.get('tableCode'),
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
"type": "connect",
|
||||
})
|
||||
this.socketTicket = new webSocketUtils(
|
||||
`${uni.conf.baseUrlwws}/websocket/table/${this.tableCode}/${uni.cache.get('shopUser').shopId}/${uni.cache.get('userInfo').id}`,
|
||||
5000)
|
||||
|
||||
},
|
||||
// 数据处理
|
||||
socketSendMsg(data) {
|
||||
@@ -474,6 +366,48 @@
|
||||
this.socketTicket.send(data);
|
||||
}
|
||||
},
|
||||
scanCodehandle(e) {
|
||||
this.tableCode = this.getQueryString(decodeURIComponent(e), 'code')
|
||||
uni.cache.set('tableCode', this.tableCode)
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.login({ //alipay weixin
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
console.log(infoRes, 81);
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
encryptedData: infoRes.encryptedData, // 用户非敏感信息
|
||||
rawData: infoRes.rawData,
|
||||
signature: infoRes.signature,
|
||||
iv: infoRes.iv,
|
||||
qrCode: uni.cache.get('tableCode')
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
this.handlemessage()
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
@@ -482,32 +416,34 @@
|
||||
}
|
||||
return null;
|
||||
},
|
||||
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格
|
||||
if (b == '单规格') { //没有规格为空
|
||||
async cartadd(item, index, index1, a, b, guge) { //列表添加
|
||||
console.log(item, index, index1, a, b, guge)
|
||||
if (guge == '单规格') { //没有规格为空
|
||||
this.specifications.duoguge = ''
|
||||
this.skuidname = []
|
||||
}
|
||||
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
||||
this.hodgepodge(item, 1, a) //获取skuid
|
||||
},
|
||||
async cartListadd(item, index, a) { //购物车加减
|
||||
async cartListadd(item, index, a) {
|
||||
console.log(item, index, a)
|
||||
try {
|
||||
const data = { //定义socket数据传参
|
||||
"name": item.name,
|
||||
"skuId": item.skuId,
|
||||
"num": a == '-' ? -1 : 1, //skuId
|
||||
"type": "addcart", //“addcart:添加购物车,create0rder:生成订单,clearCart:清空购物车”,
|
||||
"productId": item.productId, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"productId": item.id, //商品id
|
||||
"shopId": uni.cache.get('shopUser').shopId,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
async productqueryProduct() { //list 数据
|
||||
let res = await this.api.productqueryProduct({
|
||||
code: uni.cache.get('tableCode'),
|
||||
code: this.tableCode,
|
||||
productGroupId: ''
|
||||
})
|
||||
if (res.code == 0) {
|
||||
@@ -517,45 +453,50 @@
|
||||
});
|
||||
}
|
||||
},
|
||||
clickspecifications(item1, index, index1) {
|
||||
clickspecifications(e, a, b, d) {
|
||||
console.log(e, a, b)
|
||||
this.skuidname = []
|
||||
this.specifications = item1
|
||||
this.specifications.indexa = index
|
||||
this.specifications.indexb = index1
|
||||
try {
|
||||
if (item1.productSkuResult == null) {
|
||||
// 但但单个规格弹框的处理
|
||||
this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
|
||||
} else {
|
||||
// 多规格数据处理
|
||||
this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
|
||||
let res = {
|
||||
id: item1.id, //商品id
|
||||
name: item.name,
|
||||
start: 0,
|
||||
children: item.value.split(",")
|
||||
}
|
||||
return res
|
||||
})
|
||||
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
this.skuidname.push(val.children[0])
|
||||
})
|
||||
this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
|
||||
this.specifications = e
|
||||
this.specifications.indexa = a
|
||||
this.specifications.indexb = b
|
||||
this.specifications.duoguge = 'duoguge'
|
||||
if (e.productSkuResult.tagSnap == null) {
|
||||
uni.showToast({
|
||||
title: '暂无规格',
|
||||
icon: "none",
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.specifications.tagSnap = JSON.parse(e.productSkuResult.tagSnap).map((item) => {
|
||||
let res = {
|
||||
id: e.id, //商品id
|
||||
name: item.name,
|
||||
start: 0,
|
||||
children: item.value.split(",")
|
||||
}
|
||||
|
||||
return res
|
||||
})
|
||||
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
this.skuidname.push(val.children[0])
|
||||
})
|
||||
try {
|
||||
this.hodgepodge(this.specifications.tagSnap[0], 2)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
if (d != '更新数据') {
|
||||
this.showShopsku = true
|
||||
}
|
||||
},
|
||||
async morloe(e, index, index1, item) {
|
||||
this.specifications.tagSnap[index]['start'] = index1
|
||||
this.skuidname.splice(index, 1, e) //替换skuidname的数据
|
||||
this.hodgepodge(item, 2)
|
||||
},
|
||||
async hodgepodge(item, a, c) { //此接口去获取商品id !!!赋值库存 数量 价格等
|
||||
async hodgepodge(item, a, c) { //去获取商品id 库存等
|
||||
try {
|
||||
let res = await this.api.productqueryProductSku({
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
shopId: uni.cache.get('shopUser').shopId,
|
||||
productId: item.id, //商品id
|
||||
spec_tag: this.skuidname.join(",")
|
||||
})
|
||||
@@ -566,84 +507,69 @@
|
||||
})
|
||||
} else {
|
||||
this.skuidsearch = res.data.id // 储存skuid 用于筛选数量
|
||||
this.salePrice = res.data.salePrice // 价格
|
||||
this.salePrice = res.data.salePrice // 储存skuid 用于筛选数量
|
||||
let data = null
|
||||
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
||||
if (a == 1) {
|
||||
data = { //定义socket数据传参
|
||||
"nickName": this.userInfo.nickName,
|
||||
"barrageavatar": this.userInfo.headImg,
|
||||
'name': item.name,
|
||||
"skuId": res.data.id,
|
||||
"num": c == '-' ? -1 : 1, //数量
|
||||
"type": "addcart", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
"productId": item.id, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"shopId": uni.cache.get('shopUser').shopId,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
} else {
|
||||
data = { //查询这个商品的价格
|
||||
"name": item.name,
|
||||
data = { //定义socket数据传参
|
||||
"skuId": res.data.id,
|
||||
"num": '', //数量
|
||||
"type": "sku", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
"productId": item.id, //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"shopId": uni.cache.get('shopUser').shopId,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.showShopsku = true //打开弹框
|
||||
}
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
orderdetail() { // 直接生成订单
|
||||
if (this.cartLists.data.length == 0) {
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
title: '获取失败',
|
||||
icon: "none",
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
|
||||
});
|
||||
// let data = {
|
||||
// "skuId": '',
|
||||
// "num": '', //数量
|
||||
// "type": "createOrder", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
// "couponsId": '', //优惠券ID,
|
||||
// "isYhq": 0, // 是否使用优惠券( 1: 使用, 0: 不使用),
|
||||
// "isBuyYhq": 0, // 是否购买优惠券( 1: 购买, 0: 不够买)
|
||||
// "productId": '', //商品id
|
||||
// "shopId": uni.cache.get('shopUser'),
|
||||
// "userId": uni.cache.get('userInfo').id,
|
||||
// }
|
||||
// this.datasocket = data
|
||||
// uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
},
|
||||
async cartclear() { //清空购物车
|
||||
orderdetail() {
|
||||
let data = { //定义socket数据传参
|
||||
"skuId": '',
|
||||
"num": '', //数量
|
||||
"type": "createOrder", //“addcart:添加购物车,create0rder:生成订单,clearCart:庆康购物车”,
|
||||
"productId": '', //商品id
|
||||
"shopId": uni.cache.get('shopUser').shopId,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
}
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
|
||||
},
|
||||
async cartclear() {
|
||||
try {
|
||||
const data = { //定义socket数据传参
|
||||
"skuId": '',
|
||||
"num": '', //skuId
|
||||
"type": "clearCart", //“addcart:添加购物车,create0rder:生成订单,clearCart:清空购物车”,
|
||||
"productId": '', //商品id
|
||||
"shopId": uni.cache.get('shopUser'),
|
||||
"shopId": uni.cache.get('shopUser').shopId,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
};
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
},
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
this.socketTicket.Close()
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
@@ -656,12 +582,6 @@
|
||||
break;
|
||||
}
|
||||
},
|
||||
//打电话
|
||||
makePhoneCall(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone //仅为示例
|
||||
});
|
||||
},
|
||||
// 点击菜单商品滚动到指定为止
|
||||
titleClickHandle(id) {
|
||||
uni.createSelectorQuery()
|
||||
@@ -711,7 +631,7 @@
|
||||
.exec();
|
||||
}
|
||||
this.titleTopNums = topNums;
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -741,7 +661,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-right: $paddingSize;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -797,7 +717,6 @@
|
||||
height: $h;
|
||||
margin-top: -40upx;
|
||||
background: #999;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
@@ -850,7 +769,6 @@
|
||||
.left-wrap {
|
||||
width: $tabLeft;
|
||||
background-color: $bg;
|
||||
padding: 0 0 $paddingSize * 3 + $cartH 0;
|
||||
|
||||
.left {
|
||||
width: $tabLeft;
|
||||
@@ -860,8 +778,7 @@
|
||||
height: $itemH;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $paddingSize;
|
||||
justify-content: center;
|
||||
padding-left: $paddingSize;
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
@@ -894,25 +811,6 @@
|
||||
display: flex;
|
||||
padding-bottom: $paddingSize;
|
||||
|
||||
.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: 20upx;
|
||||
@@ -923,13 +821,6 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.namess {
|
||||
margin-top: 16rpx;
|
||||
font-size: 24upx;
|
||||
font-weight: 300;
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
.select-sku-wrap {
|
||||
.t {
|
||||
color: #999;
|
||||
@@ -938,7 +829,7 @@
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
margin-top: 16rpx;
|
||||
padding-top: $paddingSize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -1004,23 +895,12 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 6upx 10upx;
|
||||
background-color: $color-priamry;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1031,7 +911,7 @@
|
||||
width: 100%;
|
||||
padding: $paddingSize;
|
||||
position: fixed;
|
||||
bottom: $paddingSize;
|
||||
bottom: $paddingSize * 2;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
|
||||
@@ -1088,7 +968,7 @@
|
||||
.cart-list-wrap {
|
||||
.cart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
background-color: #f4eddf;
|
||||
padding: 20upx $paddingSize;
|
||||
border-radius: 20upx 20upx 0 0;
|
||||
@@ -1115,23 +995,10 @@
|
||||
}
|
||||
|
||||
.shop_sku {
|
||||
position: relative;
|
||||
width: 700rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
.positionabsolute {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.shop_skucimage {
|
||||
width: 100%;
|
||||
height: 440rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.shop_sku_name {
|
||||
padding: 0 $paddingSize;
|
||||
margin-top: 20rpx;
|
||||
@@ -1225,106 +1092,12 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 16upx 20upx;
|
||||
padding: 6upx 10upx;
|
||||
background-color: $color-priamry;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.classorderdetailshow {
|
||||
position: relative;
|
||||
|
||||
.orderdetailuicon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.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_onethere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="t"></text>
|
||||
<text class="t">{{shopUser.nickName}}</text>
|
||||
</view>
|
||||
<view class="code-wrap">
|
||||
<view class="num-wrap">
|
||||
<text class="t">账户余额:</text>
|
||||
<text class="num">{{shopInfo.amount || '--'}}</text>
|
||||
<text class="num">{{shopUser.amount}}</text>
|
||||
</view>
|
||||
<view class="line-code">
|
||||
<tki-barcode ref="tkiBarcode" show :opations="tkiOptions"></tki-barcode>
|
||||
<tki-barcode ref="tkiBarcode" show :opations="tkiOptions"></tki-barcode>
|
||||
</view>
|
||||
<view class="ewm-wrap">
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="createcardNo"></uqrcode>
|
||||
</view>
|
||||
<view class="name">
|
||||
<text>使用门店:{{shopInfo.shopName || '--'}}</text>
|
||||
<text>使用门店:{{shopUser.name}}</text>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
@@ -35,22 +35,20 @@
|
||||
fontSize: 28,
|
||||
textMargin: 14
|
||||
},
|
||||
createcardNo: '',
|
||||
shopInfo: null
|
||||
shopUser: {},
|
||||
createcardNo: ''
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopInfo = JSON.parse(e.shopInfo)
|
||||
onLoad() {
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.logincreateCardNo();
|
||||
},
|
||||
methods: {
|
||||
async logincreateCardNo() {
|
||||
let res = await this.api.logincreateCardNo({
|
||||
"shopId": this.shopInfo.shopId
|
||||
})
|
||||
let res = await this.api.logincreateCardNo()
|
||||
if (res.code == 0) {
|
||||
this.createcardNo = res.data
|
||||
this.$refs.tkiBarcode.setval(this.createcardNo) //操作属性
|
||||
this.$refs.tkiBarcode.setval(this.createcardNo)//操作属性
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="contentitem" v-for="(item,index) in list" :key="index">
|
||||
<view class="contentitemone flex-between">
|
||||
<view class="contentitemone_o">
|
||||
{{item.shopName}}{{(item.chainName)}}
|
||||
</view>
|
||||
<u-icon name="phone-fill" color="#333333" size="50" @click="clickphone(item.phone)"></u-icon>
|
||||
</view>
|
||||
<view class="contentitemtow">
|
||||
营业时间:{{item.businessTime}}
|
||||
</view>
|
||||
<view class="contentitemthere flex-start">
|
||||
<view class="contentitemthere_o" v-if="index == 0">
|
||||
最近
|
||||
</view>
|
||||
<image class="contentitemthere_image"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/product/d.png" mode="aspectFill"></image>
|
||||
<view class="contentitemthere_t">
|
||||
距您{{item.distances}}<text v-if="item.address">,{{item.address}}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopName: '',
|
||||
list:[]
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopName = JSON.parse(decodeURIComponent(e.name));
|
||||
console.log(this.shopName)
|
||||
this.distirictcomShopList()
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
//打电话
|
||||
clickphone(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e
|
||||
});
|
||||
},
|
||||
async distirictcomShopList() {
|
||||
let res = await this.api.distirictcomShopList({
|
||||
lng: uni.cache.get('getLocationstorage').lng,
|
||||
lat: uni.cache.get('getLocationstorage').lat,
|
||||
address: uni.cache.get('getLocationstorage').address,
|
||||
distanceInKm: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
shopName: this.shopName
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.list = res.data
|
||||
}
|
||||
},
|
||||
clickproduct(item) {
|
||||
uni.pro.navigateTo('product/index',{
|
||||
id:item.id
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 24rpx;
|
||||
|
||||
.contentitem:nth-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.contentitem {
|
||||
padding: 32rpx 0;
|
||||
width: 100%;
|
||||
border-top: 2rpx solid #E5E5E5;
|
||||
|
||||
.contentitemone {
|
||||
.contentitemone_o {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.contentitemtow {
|
||||
margin-top: 16rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.contentitemthere {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.contentitemthere_o {
|
||||
padding: 2rpx 12rpx;
|
||||
background: #FFF9E1;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16rpx;
|
||||
color: #FF9125;
|
||||
}
|
||||
|
||||
.contentitemthere_image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.contentitemthere_t {
|
||||
margin-left: 8rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text{
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,460 +0,0 @@
|
||||
<template>
|
||||
<view class="placeOrder">
|
||||
<view class="placetop">
|
||||
<view class="placetopone">
|
||||
<view style="display: flex;">
|
||||
<image :src="info.proImg"
|
||||
style="width: 102rpx;height: 102rpx;border-radius: 50%;margin-left: 28rpx;" mode=""></image>
|
||||
<view class="placetopInfo">
|
||||
<view>{{info.proName.length>12?info.proName.substring(0,12)+'...':info.proName}} </view>
|
||||
<view>{{info.avaTime}} </view>
|
||||
<view>{{info.proDetail}} </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placetopmoney">
|
||||
<view>
|
||||
<text>¥{{info.originPrice}}</text>
|
||||
<text>¥{{info.salePrice}}</text>
|
||||
</view>
|
||||
<u-number-box v-model="Quantity">
|
||||
<view slot="minus" class="minus">
|
||||
<u-icon name="minus" color="#CCCCCC" bold size="30"></u-icon>
|
||||
</view>
|
||||
<text slot="input" style="width: 20px;text-align: center;">{{Quantity}}</text>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FF4B10" bold size="30"></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="redMoney" v-if="false">
|
||||
<view>
|
||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
|
||||
style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
|
||||
红包/抵用券
|
||||
</view>
|
||||
<view>
|
||||
{{info.couponDetail.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="background-color: #F6F6F6;height: 2rpx;width: 100%;margin: 16rpx 0;"></view>
|
||||
<view class="jiesuanmoney">
|
||||
<text>
|
||||
优惠<text style="color: #FF4C11;font-weight: 500;">¥{{calculateEvent(info.save)}}</text>
|
||||
</text>
|
||||
<text>
|
||||
小计<text style="color: #FF4C11;font-weight: 500;">¥{{calculateEvent(info.salePrice) }}</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<view class="payType">
|
||||
<view class="">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="">
|
||||
<u-radio-group v-model="radiovalue1" iconPlacement="right" :size="28" placement="column">
|
||||
<u-radio activeColor="#ffd158" name="1">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
微信支付
|
||||
</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;"
|
||||
v-if="info.isUseVip==1"> </view>
|
||||
<u-radio activeColor="#ffd158" name="2" v-if="info.isUseVip==1">
|
||||
<view class="dfs">
|
||||
<image style="width:44rpx;height:44rpx"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
|
||||
</image>
|
||||
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
||||
会员卡支付</text>
|
||||
</view>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;"
|
||||
v-if="info.isUseVip==1">
|
||||
会员卡余额{{ amountVIP.amount}} <text
|
||||
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
|
||||
@click="goRecharge">去充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="placeBottom">
|
||||
<view class="">
|
||||
<text style="font-size: 24rpx;font-weight: bold;"> 合计 </text><text
|
||||
style="font-size: 32rpx;font-weight: bold;color:#FF4C11"> ¥{{calculateEvent(info.salePrice)}}
|
||||
</text>
|
||||
<text style="font-size: 24rpx;font-weight: 400;color: # 999;">含优惠卷包¥0</text>
|
||||
</view>
|
||||
<view class="">
|
||||
共{{Quantity}}件 已优惠¥{{calculateEvent(info.save) }}
|
||||
</view>
|
||||
<button class="btnStyle" @click="fangdouevent">提交订单</button>
|
||||
</view>
|
||||
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-show="ispws"></payPassword>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import payPassword from '@/components/payPassword.vue'
|
||||
export default {
|
||||
components: {
|
||||
payPassword
|
||||
},
|
||||
onLoad(e) {
|
||||
this.$store.dispatch("set_shopid"); //获取shapid
|
||||
this.getInfo(e.id)
|
||||
this.orderIds = e.id
|
||||
this.amount = uni.cache.get('userInfo').amount
|
||||
this.vipId = uni.cache.get('userInfo').id
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: null,
|
||||
Quantity: 1,
|
||||
radiovalue1: '1',
|
||||
amount: 0,
|
||||
orderIds: null,
|
||||
vipId: null,
|
||||
ispws: false,
|
||||
amountVIP: null,
|
||||
listinfoid: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getAount(shopUser) {
|
||||
let res = await this.api.shopUserInfo({
|
||||
// shopId:店铺ID
|
||||
"shopId": shopUser,
|
||||
"userId": uni.cache.get('userInfo').id
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.amountVIP = res.data
|
||||
|
||||
}
|
||||
},
|
||||
// 余额支付
|
||||
async accountPayevent(pwd) {
|
||||
this.ispws = false
|
||||
let res = await this.api.payOrderPay({
|
||||
orderId: this.listinfoid.id,
|
||||
payType: "deposit",
|
||||
pwd
|
||||
})
|
||||
if (res.code == 0) {
|
||||
let orderInfo = {
|
||||
createdAt: this.listinfoid.createTime,
|
||||
orderNo: this.listinfoid.orderNo,
|
||||
orderAmount: this.calculateEvent(this.info.salePrice)
|
||||
}
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付成功',
|
||||
success: () => {
|
||||
setTimeout(res => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/successful?orderId=' + this
|
||||
.listinfoid.id + '&orderInfo=' + JSON.stringify(
|
||||
orderInfo) + '&radiovalue1=' + this.radiovalue1
|
||||
});
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
} else if (res.data == 1) {
|
||||
setTimeout(() => {
|
||||
// 去充值
|
||||
this.goRecharge()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
calculateEvent(d) {
|
||||
return (d * 1000 * this.Quantity) / 1000
|
||||
},
|
||||
goRecharge() {
|
||||
uni.pro.navigateTo('/pages/member/index', {
|
||||
shopId: this.info.shopId
|
||||
})
|
||||
},
|
||||
fangdouevent() {
|
||||
this.$u.debounce(() => {
|
||||
this.sumbitFrom()
|
||||
}, 1000)
|
||||
},
|
||||
async sumbitFrom() {
|
||||
let payMoney = this.info.salePrice * this.Quantity
|
||||
let res = await this.api.creatGroupOrder({
|
||||
num: this.Quantity,
|
||||
proId: this.info.proId,
|
||||
shopId: this.info.shopId,
|
||||
payAmount: payMoney,
|
||||
orderAmount: payMoney
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.listinfoid = res.data
|
||||
// radiovalue1:为1的时候微信支付,为2是会员卡,需要输入支付密码
|
||||
if (this.radiovalue1 == 1) {
|
||||
// 调用支付接口
|
||||
this.payEvent(res.data.id)
|
||||
} else {
|
||||
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
||||
let isVip = uni.cache.get('userInfo').isPwd
|
||||
if (isVip == 0) {
|
||||
uni.pro.navigateTo('/pages/user/repairpassword', {
|
||||
shopId_id: uni.cache.get('shopUser')
|
||||
})
|
||||
} else {
|
||||
this.ispws = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.payPwd.onPayUp();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
async payEvent(id) {
|
||||
let res = await this.api.payOrderPay({
|
||||
payType: 'wechatPay',
|
||||
orderId: id,
|
||||
orderType: 'group'
|
||||
})
|
||||
if (res) {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.appId, // 微信支付商户号
|
||||
timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.nonceStr, // 随机字符串
|
||||
package: res.data.package, // 固定值
|
||||
signType: res.data.signType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
async getInfo(id) {
|
||||
let res = await this.api.getproductorderConfirm({
|
||||
productId: id,
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.info = res.data
|
||||
// 获取余额
|
||||
this.getAount(res.data.shopId)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.placeOrder {
|
||||
|
||||
.placetop {
|
||||
width: 750rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.placetopone {
|
||||
.df(space-between);
|
||||
|
||||
.placetopInfo {
|
||||
margin-left: 18rpx;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:nth-child(2),
|
||||
>view:last-child {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.placetopmoney {
|
||||
>view:first-child {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
>text:first-child {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
>text:last-child {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.redMoney {
|
||||
.df(space-between);
|
||||
margin-top: 30rpx;
|
||||
.m(30rpx);
|
||||
|
||||
>view:first-child {
|
||||
.df;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
background: #FFE9E9;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FF3333;
|
||||
text-align: center;
|
||||
padding: 9rpx 13rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.jiesuanmoney {
|
||||
// height: 50rpx;
|
||||
// line-height: 50rpx;
|
||||
text-align: right;
|
||||
|
||||
>text:first-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
>text:last-child {
|
||||
font-size: 32rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.placeBottom {
|
||||
position: fixed;
|
||||
bottom: 0%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx 34rpx;
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 16rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
}
|
||||
|
||||
.btnStyle {
|
||||
width: 302rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
right: 58rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.m(@top, @right: 0, @bottom: 0, @left: 0) {
|
||||
margin: @top, @right, @bottom, @left
|
||||
}
|
||||
|
||||
.df(@start: flex-start, @position: center) {
|
||||
display: flex;
|
||||
align-items: @position;
|
||||
justify-content: @start;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.minus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-width: 1px;
|
||||
border-color: #F0F0F0;
|
||||
border-style: solid;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.plus {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FFF1EC;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,321 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content_box">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系人
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="请填写收货人姓名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
联系电话
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="number" v-model="form.mobile" maxlength="11"
|
||||
placeholder="请填写收货人手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在地区
|
||||
</view>
|
||||
<view class="content_box_item_tow flex-start">
|
||||
<input type="text" v-model="regionName" disabled="disabled" placeholder="省市区、乡镇等" />
|
||||
<!-- <image class="content_box_itemimage" @click="chooseLocation" src="@/static/address.png" mode="aspectFill">
|
||||
</image> -->
|
||||
</view>
|
||||
</view>
|
||||
</pick-regions>
|
||||
<!-- <view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
所在街道
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.name" placeholder="填写街道" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="content_box_item flex-start">
|
||||
<view class="content_box_item_one">
|
||||
详细地址
|
||||
</view>
|
||||
<view class="content_box_item_tow">
|
||||
<input type="text" v-model="form.address" placeholder="请填写详细地址" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_box_tow flex-between">
|
||||
<view class="content_box_tow_one">
|
||||
设为默认地址
|
||||
</view>
|
||||
<u-switch v-model="showis_default" size="20" @change="change"></u-switch>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="usereditaddress">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
||||
export default {
|
||||
components: {
|
||||
pickRegions
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
region: [],
|
||||
showis_default: true,
|
||||
defaultRegionCode: '610112', //默认未央区
|
||||
height: '',
|
||||
form: {
|
||||
regionName: '',
|
||||
type: ''
|
||||
},
|
||||
valueswitch: false
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
this.form.id = e.id
|
||||
if (e.type == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加地址'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '修改地址'
|
||||
})
|
||||
let res = await this.api.usereaddressshow({
|
||||
id: this.form.id
|
||||
})
|
||||
console.log(res)
|
||||
if (res) {
|
||||
this.form = res
|
||||
if (res.is_default == 1) {
|
||||
this.showis_default = true
|
||||
} else {
|
||||
this.showis_default = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.form.type = e.type
|
||||
},
|
||||
onShow() {},
|
||||
watch: {},
|
||||
computed: {
|
||||
regionName() {
|
||||
// 转为字符串
|
||||
let res = null
|
||||
if (this.region.length == 0) {
|
||||
res = this.form.province + this.form.city + this.form.area
|
||||
} else {
|
||||
res = this.region.map(item => item.name).join(' ')
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.showis_default = e
|
||||
console.log('change', e);
|
||||
},
|
||||
async usereditaddress() {
|
||||
if (this.form.name == null || this.form.name == '') {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.mobile == null || this.form.mobile == '') {
|
||||
uni.showToast({
|
||||
title: '请输入电话号码',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.province == null || this.form.province == '') {
|
||||
uni.showToast({
|
||||
title: '请选择省,市,区',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.form.address == null || this.form.address == '') {
|
||||
uni.showToast({
|
||||
title: '请输入详细地址',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let res = await this.api.usereditaddress({
|
||||
id: this.form.id, //地址ID
|
||||
province: this.form.province, //省
|
||||
city: this.form.city, //市
|
||||
area: this.form.area, //区
|
||||
address: this.form.address, //详细地址
|
||||
name: this.form.name, //姓名
|
||||
mobile: this.form.mobile, //电话
|
||||
lng: this.form.lng, //经度
|
||||
is_default: this.showis_default == true ? 1 : '', //1 默认
|
||||
lat: this.form.lat, //维度
|
||||
type: this.form.type //1 添加 2修改
|
||||
})
|
||||
console.log(res)
|
||||
if (res == 1) {
|
||||
uni.showToast({
|
||||
title: this.form.type == 1 ? '添加成功' : '修改成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
handleGetRegion(region) {
|
||||
console.log(111, region)
|
||||
this.region = region
|
||||
this.form.province = region[0].name
|
||||
this.form.city = region[1].name
|
||||
this.form.area = region[2].name
|
||||
|
||||
},
|
||||
chooseLocation() {
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
this.lnglat = res.latitude + '-' + res.longitude
|
||||
console.log('位置名称:' + res.name);
|
||||
console.log('详细地址:' + res.address);
|
||||
console.log('纬度:' + res.latitude);
|
||||
console.log('经度:' + res.longitude);
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e)
|
||||
// uni.getSetting({
|
||||
// success: function(res) {
|
||||
// var statu = res.authSetting;
|
||||
// console.log(statu);
|
||||
// if (!statu['scope.userLocation']) {
|
||||
// console.log(123);
|
||||
// uni.showModal({
|
||||
// title: '是否授权当前位置',
|
||||
// content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
|
||||
// success(tip) {
|
||||
// if (tip.confirm) {
|
||||
// uni.authorize({
|
||||
// scope: 'scope.userLocation',
|
||||
// success:()=> {
|
||||
// this.chooseLocation()
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '授权失败',
|
||||
// icon: 'none',
|
||||
// duration: 1000
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', e.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.content_box {
|
||||
padding-left: 40rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_item {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid #F6F6F6;
|
||||
|
||||
.content_box_item_one {
|
||||
width: 112rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.content_box_item_tow {
|
||||
flex: auto;
|
||||
padding-left: 80rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
|
||||
input {
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_itemimage {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_box_tow {
|
||||
margin-top: 24rpx;
|
||||
padding: 34rpx 44rpx;
|
||||
background: #FFF;
|
||||
|
||||
.content_box_tow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 90%;
|
||||
bottom: 50rpx;
|
||||
left: 5%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background:#f0cb66;
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,244 +0,0 @@
|
||||
<template>
|
||||
<view class="content" >
|
||||
<view class="contentitem" v-for="(item,index) in list" :key="index" @click.stop="order_fn(item)">
|
||||
<view class="contentitemone flex-start">
|
||||
<view class="contentitemone_textone">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="contentitemone_textyow">
|
||||
{{item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentitemtow ">
|
||||
{{item.province}}{{item.area}}{{item.city}}{{item.address}}
|
||||
</view>
|
||||
<view class="contentitemthere flex-between">
|
||||
<view class="contentitemthereone flex-start" @click.stop="edit(item)">
|
||||
<u-icon v-if="item.is_default == 1" style="margin-right: 10rpx;" name="checkmark-circle-fill"
|
||||
color="##9397c1" size="18"></u-icon>
|
||||
<view v-else class="contentitemthereonecircle">
|
||||
|
||||
</view>
|
||||
默认地址
|
||||
</view>
|
||||
<view class="contentitemtheretow flex-start">
|
||||
<text @click.stop="edit(item)">编辑</text>
|
||||
<text style="margin-left: 60rpx;" @click.stop="clickdelete(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="positionfixed flex-center" @click="add">
|
||||
<u-icon name="plus" color="#FFF" size="24"></u-icon>
|
||||
<view style="margin-left: 20rpx;">添加地址</view>
|
||||
</view>
|
||||
<view v-if="list.length==0 && is_end == true" class="flex-colum">
|
||||
<image style="margin-top: 100rpx;" :src="bgnothave" mode="aspectFill">
|
||||
</image>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" />
|
||||
<view :style="{height:height}"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgnothave: uni.getStorageSync('bgnothave'),
|
||||
height: '',
|
||||
is_order: 0,
|
||||
list: [],
|
||||
is_end: false,
|
||||
form: {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
this.is_order = e.order
|
||||
},
|
||||
onReachBottom() {
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
var query = uni.createSelectorQuery().in(this).select('.positionfixed')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.height = ele.height + 50 + "px";
|
||||
that = null;
|
||||
}
|
||||
})
|
||||
}).exec();
|
||||
},
|
||||
onShow() {
|
||||
// this.inif()
|
||||
},
|
||||
methods: {
|
||||
async usermyaddresslist() {
|
||||
let res = await this.api.usermyaddresslist({
|
||||
page: this.form.page
|
||||
})
|
||||
if (res.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res];
|
||||
if (res.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
order_fn(item) {
|
||||
if (this.is_order == 1) {
|
||||
uni.$emit('update', JSON.stringify(item));
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
add() {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 1
|
||||
})
|
||||
},
|
||||
edit(e) {
|
||||
uni.pro.navigateTo('my/address/edit', {
|
||||
type: 2,
|
||||
id: e.id
|
||||
})
|
||||
},
|
||||
inif() {
|
||||
this.list = []
|
||||
this.is_end = false,
|
||||
this.form = {
|
||||
page: 1,
|
||||
status: 'loadmore',
|
||||
},
|
||||
this.usermyaddresslist()
|
||||
},
|
||||
async clickdelete(e) {
|
||||
var this_ = this
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除该地址吗?',
|
||||
async success(data) {
|
||||
if (data.confirm) {
|
||||
let res = await this_.api.useredeleteaddress({
|
||||
id: e.id
|
||||
})
|
||||
if (res) {
|
||||
this_.inif()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.positionfixed {
|
||||
position: fixed;
|
||||
background: #f6f6f6;
|
||||
width: 80%;
|
||||
bottom: 50rpx;
|
||||
left: 10%;
|
||||
padding: 24rpx 34rpx;
|
||||
text-align: center;
|
||||
background: var(--bg-color-button);
|
||||
border-radius: 46rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.contentitem {
|
||||
padding: 32rpx 40rpx;
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
|
||||
.contentitemone {
|
||||
.contentitemone_textone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.contentitemone_textyow {
|
||||
margin-left: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.contentitemtow {
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.contentitemtow::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
margin: 32rpx 0 20rpx 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.contentitemthere {
|
||||
.contentitemthereone {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #5C685D;
|
||||
}
|
||||
|
||||
.contentitemthereonecircle {
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border: 2rpx solid #666666;
|
||||
}
|
||||
|
||||
.contentitemtheretow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,353 +1,49 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="towcontent">
|
||||
<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,item)">
|
||||
<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>
|
||||
</view>
|
||||
<view class="header">
|
||||
<navigator class="t" hover-class="none">历史记录</navigator>
|
||||
<navigator class="t" hover-class="none">管理</navigator>
|
||||
</view>
|
||||
<view class="containertop">
|
||||
<view class="containertopbox">
|
||||
<view class="containertopboxitem flex-start" v-for="(item,index) in list" :key="index">
|
||||
<view class="containertopboxitemleft flex-colum"
|
||||
:class="item.status == 0?'':'containertopboxitemlefts'">
|
||||
<view class="containertopboxitemleft_one"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_ones'">
|
||||
<text style="font-size: 28rpx;">¥</text>
|
||||
<text>{{item.couponsAmount || 0}}</text>
|
||||
</view>
|
||||
<view class="containertopboxitemleft_tow"
|
||||
:class="item.status == 0?'':'containertopboxitemleft_tows'">
|
||||
优惠券(元)
|
||||
</view>
|
||||
</view>
|
||||
<view class="containertopboxitemright">
|
||||
<view class="containertopboxitemright_one">
|
||||
无门槛使用
|
||||
</view>
|
||||
<view class="containertopboxitemright_tow">
|
||||
通用红包券
|
||||
</view>
|
||||
<view class="containertopboxitemright_there">
|
||||
有效期至:{{$u.timeFormat(item.endTime, 'yyyy/mm/dd') || '0'}}
|
||||
</view>
|
||||
<view
|
||||
:class="item.status == 0?'containertopboxitemright_four':'containertopboxitemright_fours'">
|
||||
{{item.status == 0 ? '兑换积分':'已过期'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
|
||||
v-if="is_end" mode="aspectFill"></image>
|
||||
<u-loadmore :status="form.status" iconSize='24' fontSize='24' height='40' />
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in 5" :key="item"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listbox: [{
|
||||
name: '全部',
|
||||
type: ''
|
||||
},
|
||||
{
|
||||
name: '未使用',
|
||||
type: '0'
|
||||
},
|
||||
{
|
||||
name: '已过期',
|
||||
type: '1'
|
||||
}
|
||||
],
|
||||
towcontentclickindex: 0,
|
||||
list: [],
|
||||
is_end:false,
|
||||
form: {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
statuses: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.ordermineCouponsthis()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.ordermineCouponsthis()
|
||||
},
|
||||
methods: {
|
||||
init_fn(e) {
|
||||
this.list = []
|
||||
this.form = {
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
statuses: ''
|
||||
}
|
||||
try {
|
||||
if (e) {
|
||||
this.form.statuses = e
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
this.ordermineCouponsthis()
|
||||
},
|
||||
async ordermineCouponsthis() {
|
||||
try {
|
||||
let res = await this.api.ordermineCoupons({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
status: this.form.statuses,
|
||||
page: this.form.page,
|
||||
size: this.form.size,
|
||||
orderId:""
|
||||
})
|
||||
if (res.data.pages < this.form.page) {
|
||||
this.form.status = 'nomore'
|
||||
if (this.form.page == 1 && res.data.list == 0) {
|
||||
this.is_end = true
|
||||
}
|
||||
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) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
towcontentclick(index, item) {
|
||||
this.towcontentclickindex = index
|
||||
this.form.statuses = item.type
|
||||
this.init_fn(item.type)
|
||||
}
|
||||
}
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
$height: 40px;
|
||||
.header {
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 $paddingSize;
|
||||
.t {
|
||||
margin-left: $paddingSize;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.container {
|
||||
.towcontent {
|
||||
padding: 0 28rpx;
|
||||
border-top: 16rpx solid #F9F9F9;
|
||||
|
||||
.towcontentlistxitem {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.towcontentlistxitembox {
|
||||
width: 33%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
margin-top: 6rpx;
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentlistxitemboxopacity {
|
||||
width: 33%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 38.83rpx;
|
||||
height: 8.62rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.containertop {
|
||||
padding: 40rpx 32rpx;
|
||||
|
||||
.containertopbox {
|
||||
.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-top: 20rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.containertopboxitemleft {
|
||||
position: relative;
|
||||
width: 182rpx;
|
||||
height: 192rpx;
|
||||
background: #F1CB66;
|
||||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
|
||||
::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
display: inline-block;
|
||||
width: 32rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 166rpx;
|
||||
background: #f9f9f9;
|
||||
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_tows {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.containertopboxitemlefts {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.containertopboxitemright {
|
||||
position: relative;
|
||||
padding: 0 32rpx;
|
||||
flex: auto;
|
||||
height: 192rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||||
|
||||
.containertopboxitemright_one {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx dotted #707070;
|
||||
}
|
||||
|
||||
.containertopboxitemright_tow {
|
||||
margin-top: 14rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.containertopboxitemright_there {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.containertopboxitemright_four {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #FE665E;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.containertopboxitemright_fours {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 0 14rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
background: #F7F7F7;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.list {
|
||||
padding: $height $paddingSize $paddingSize;
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
margin-top: $paddingSize;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,276 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 占位符导航栏 -->
|
||||
<navseat :opacity='opacity' :title='titlename' :titleshow='true'></navseat>
|
||||
<view class="onecontent">
|
||||
<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
|
||||
<view class="onecontentbox">
|
||||
<!-- <button open-type="chooseAvatar" @chooseavatar="uploadImg">
|
||||
<image class="onecontentboximage" :src="userHeadImg" mode=""></image>
|
||||
</button> -->
|
||||
<!-- <image class="onecontentboximage" :src="userHeadImg" mode="" @click="uploadImg"></image> -->
|
||||
<button type="default" class="btn" open-type="chooseAvatar" @chooseavatar="uploadImg">
|
||||
<view class="" :style="'background-image:url('+userHeadImg+');'"
|
||||
style="width: 180rxp;height: 180rpx; background-position: center;"></view>
|
||||
</button>
|
||||
|
||||
|
||||
<view class="onecontentboxitem flex-between">
|
||||
<view class="onecontentboxitemtext">
|
||||
昵称
|
||||
</view>
|
||||
<input class="onecontentboxiteminput" v-model="nickName" type="nickname" @blur="bindblur"
|
||||
placeholder="请输入昵称" @input="bindinput" />
|
||||
|
||||
</view>
|
||||
<view class="onecontentboxitem flex-between" style="border-top: 1rpx dotted #333333;">
|
||||
<view class="onecontentboxitemtext">
|
||||
手机号
|
||||
</view>
|
||||
<button class="onecontentboxiteminput buttonstyle"
|
||||
style="background-color: #fff;border: none;!important" open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhone">{{phonetitle}} </button>
|
||||
<!-- <input class="onecontentboxiteminput" disabled v-model="phonetitle" type="text"
|
||||
placeholder="请输入手机号"> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentboxitemnamber" @click="sumbit">
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
navseat
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
titlename: '完善信息',
|
||||
opacity: false,
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore',
|
||||
},
|
||||
userInfo: uni.cache.get('userInfo'),
|
||||
userHeadImg: "",
|
||||
nickName: '',
|
||||
phonetitle: ""
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.nickName = this.userInfo.nickName
|
||||
this.userHeadImg = this.userInfo.headImg
|
||||
this.phonetitle = this.userInfo.telephone ? this.userInfo.telephone : '请授权手机号'
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacitys = false
|
||||
} else {
|
||||
this.opacitys = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getPhone(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,
|
||||
})
|
||||
this.phonetitle = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
bindblur(e) {
|
||||
console.log(e, 11)
|
||||
this.nickName = e.detail.value; // 获取微信昵称
|
||||
},
|
||||
bindinput(e) {
|
||||
console.log(e, 22)
|
||||
this.nickName = e.detail.value; // 获取微信昵称
|
||||
},
|
||||
// uploadImg() {
|
||||
// let _this = this
|
||||
// uni.chooseImage({
|
||||
// crop: {
|
||||
// width: 200,
|
||||
// height: 200
|
||||
// },
|
||||
// success: (chooseImageRes) => {
|
||||
// const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
// uni.uploadFile({
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
// filePath: tempFilePaths[0],
|
||||
// header: {
|
||||
// environment: 'app',
|
||||
// type: 'android',
|
||||
// version: '1.7.3',
|
||||
// },
|
||||
// name: "file",
|
||||
// formData: {
|
||||
// file: chooseImageRes.tempFiles[0],
|
||||
// },
|
||||
// success: (uploadFileRes) => {
|
||||
// let {
|
||||
// data
|
||||
// } = JSON.parse(uploadFileRes.data)
|
||||
// this.userHeadImg = data
|
||||
// },
|
||||
// });
|
||||
// },
|
||||
// })
|
||||
// },
|
||||
uploadImg(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
console.log(e)
|
||||
console.log(e.detail)
|
||||
// this.userHeadImg = avatarUrl
|
||||
uni.uploadFile({
|
||||
url: 'https://wxcashiertest.sxczgkj.cn/cashierService/common/upload',
|
||||
// url: uni.conf.baseUrl + '/common/upload',
|
||||
|
||||
filePath: avatarUrl,
|
||||
header: {
|
||||
environment: 'app',
|
||||
type: 'android',
|
||||
version: '1.7.3',
|
||||
},
|
||||
name: "file",
|
||||
formData: {
|
||||
file: avatarUrl,
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
this.userHeadImg = data
|
||||
},
|
||||
});
|
||||
},
|
||||
async sumbit() {
|
||||
let res = await this.api.upUserInfo({
|
||||
headImg: this.userHeadImg,
|
||||
nickName: this.nickName,
|
||||
telephone: this.phonetitle == '请授权手机号' ? '' : this.phonetitle
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
.onecontent {
|
||||
padding: 0 28rpx;
|
||||
width: 100%;
|
||||
height: 446rpx;
|
||||
background: linear-gradient(180deg, #FFD158 0%, #F9F9F9 100%);
|
||||
|
||||
.onecontentbox {
|
||||
position: relative;
|
||||
margin-top: 116rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
padding: 75rpx 32rpx 0rpx 32rpx;
|
||||
|
||||
.onecontentboximage {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -60rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.onecontentboxitem {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.onecontentboxitemtext {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentboxiteminput {
|
||||
text-align: right;
|
||||
flex: auto;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.buttonstyle {
|
||||
.buttonstyle:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentboxitemnamber {
|
||||
margin-top: 84rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
background: #FFD158;
|
||||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
|
||||
>view {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.buttonstyle:after {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,227 +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: '',
|
||||
showoverlay: true
|
||||
};
|
||||
},
|
||||
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.cache.get('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,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.cache.get('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,254 +0,0 @@
|
||||
<template>
|
||||
<view class="Box">
|
||||
<view class="box_one" v-if="isPwd == 0">安全密码用于商户推广提现/订单退款,确保资金安全</view>
|
||||
<view class="box_box">
|
||||
<view class="box_item flex-between" v-if="isPwd == 0">
|
||||
<text class="top_box_one_text">手机号码</text>
|
||||
<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" disabled="disabled" />
|
||||
</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="确认密码必须是6位" maxlength="6"
|
||||
:password="!payPasswords" />
|
||||
</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;" />
|
||||
<view class="top_box_one_texts">
|
||||
<view v-if="showText == true" class="yzm" @click="CodeRegister">{{ Recapture }}</view>
|
||||
<view v-else style="color: #ccc; background-color: #f9f9f9; border-radius:16px; padding: 10rpx;">
|
||||
{{ second }}s重新发送
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-colum">
|
||||
<view class="Box_bottom" @click="userInfosavePayPassword">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
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: '发送验证码'
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
if (uni.cache.get('userInfo').isPwd != 0) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '忘记支付密码', // 标题文本,必须是字符串
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
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.cache.get('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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</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 {
|
||||
.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: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.repeat {
|
||||
position: absolute;
|
||||
bottom: 26rpx;
|
||||
right: 0;
|
||||
width: 25rpx;
|
||||
height: 17rpx;
|
||||
}
|
||||
|
||||
.top_box_one_texts {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #5082fd;
|
||||
|
||||
.yzm {
|
||||
padding: 6rpx 10rpx;
|
||||
background: #FFD158;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex-colum {
|
||||
width: 100%;
|
||||
margin-top: 156rpx;
|
||||
|
||||
.Box_bottom {
|
||||
width: 558rpx;
|
||||
height: 72rpx;
|
||||
background: #FFD158;
|
||||
border-radius: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,692 +0,0 @@
|
||||
<template>
|
||||
<view class="content" :style="[theme]">
|
||||
<view class="onecontent">
|
||||
<view class="onecontentone flex-start">
|
||||
<view class="onecontent_one">
|
||||
商品信息
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttow flex-start">
|
||||
<view class="onecontenttowitem flex-between" v-for="(item,index) in elist.goods" :key="index">
|
||||
<view class="onecontenttowitem_one flex-start">
|
||||
<image class="onecontenttowitemimage" :src="item.img" mode="aspectFill"></image>
|
||||
<view class="onecontenttowitem_onebox flex-colum-start">
|
||||
<view class="onecontenttowitem_onebox_one">
|
||||
{{item.title || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_onebox_tow">
|
||||
{{item.spec || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontenttowitem_tow flex-colum-end">
|
||||
<view class="onecontenttowitem_towstext_one">
|
||||
{{item.price || '无'}}
|
||||
</view>
|
||||
<view class="onecontenttowitem_towstetx_tow">
|
||||
×{{item.number || '无'}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontent" style="margin-top: 32rpx;">
|
||||
<view class="onecontentone flex-between">
|
||||
<view class="onecontent_one">
|
||||
确认地址
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#000" size="14"></u-icon>
|
||||
</view>
|
||||
<view class="onecontentaddress flex-colum-start" v-if="elist.address" @click="clickaddress">
|
||||
<view class="onecontentaddressone" v-if="formlist.type == 3">
|
||||
{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddressone" v-else>
|
||||
{{elist.address.province}}-{{elist.address.city}}-{{elist.address.area}}-{{elist.address.address}}
|
||||
</view>
|
||||
<view class="onecontentaddresstow">
|
||||
{{elist.address.name}}<text style="margin-left: 10rpx;">{{elist.address.mobile}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onecontentaddress" v-else>
|
||||
<view class="onecontentaddressone" @click="clickaddress">
|
||||
去添加地址
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<!-- <view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
商品金额
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
{{elist.number}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
优惠券
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
暂无可用
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
运费
|
||||
</view>
|
||||
<view class="therecontenttow_tow">
|
||||
¥{{elist.freight}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontenttow flex-between">
|
||||
<view class="therecontenttow_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="therecontenttow_tow" style="color:#FC5F69;">
|
||||
¥{{elist.price.total_price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fivecontent">
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
手机号码
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
{{mobile}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontentitem flex-between">
|
||||
<view class="fivecontentitem_one">
|
||||
姓名
|
||||
</view>
|
||||
<view class="fivecontentitem_tow">
|
||||
张雪
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="sixcontent">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/wx.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
|
||||
<image src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/ye.png" mode="aspectFill"></image>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="18"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fourcontent">
|
||||
<view class="fourcontentone flex-start">
|
||||
<view class="fourcontent_one">
|
||||
须知:
|
||||
</view>
|
||||
</view>
|
||||
<view class="fourcontenttow flex-colum-start">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额:
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{elist.price.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showpopup" @close="closepopup" @open="openpopup" mode="center" :round="10">
|
||||
<view class="u-popupflex-colum flex-colum">
|
||||
<view class="u-popupflex-columview">
|
||||
请输入支付密码
|
||||
</view>
|
||||
<u-code-input v-model="ucodeinputvalue" :maxlength="6" dot @finish="finish"></u-code-input>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpopup: false,
|
||||
ucodeinputvalue: '',
|
||||
height: '',
|
||||
order_id: '',
|
||||
elist: {
|
||||
address: {
|
||||
|
||||
},
|
||||
price: {
|
||||
total_price: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
mobile: uni.cache.get('loginuser').userinfo.mobile,
|
||||
formlist: {
|
||||
goods_id: ''
|
||||
},
|
||||
pay_type: 1
|
||||
}
|
||||
},
|
||||
async onLoad(e) {
|
||||
// this.elist = JSON.parse(optionItem)
|
||||
this.formlist = e
|
||||
this.formlist.spec = decodeURIComponent(e.spec)
|
||||
let res = await this.api.shoppingindexgoodindexoforders({
|
||||
type: this.formlist.type, // 1购物车 2商品详情页
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空(为空时返回默认地址)
|
||||
order_id:this.formlist.order_id,
|
||||
})
|
||||
if (res) {
|
||||
this.elist = res
|
||||
this.elist.goods[0].spec = this.formlist.spec
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = res.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickaddress() {
|
||||
uni.pro.navigateTo("user/address/index", {
|
||||
order: 1
|
||||
});
|
||||
uni.$once('update', data => {
|
||||
this.elist.address = JSON.parse(data)
|
||||
if (this.elist.address) {
|
||||
this.elist.address.mobile = this.elist.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
this.$forceUpdate();
|
||||
})
|
||||
},
|
||||
openpopup() {
|
||||
console.log('open');
|
||||
},
|
||||
closepopup() {
|
||||
this.showpopup = false
|
||||
},
|
||||
|
||||
finish(e) {
|
||||
this.reservationmakenowsub()
|
||||
},
|
||||
showpopupclick() {
|
||||
if(this.elist.address == null || this.elist.address == undefined){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '收货地址不能为空'
|
||||
})
|
||||
return false
|
||||
}
|
||||
if (this.pay_type == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
this.reservationmakenowsub()
|
||||
return false;
|
||||
} else {
|
||||
if (this.pay_type == 2) {
|
||||
if (this.elist.is_vip_password == 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您目前没有设置密码,请先设置支付密码',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '/pages/my/setup/repairpassword'
|
||||
});
|
||||
} else if (res.cancel) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.showpopup = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async reservationmakenowsub() {
|
||||
var datareslane = await this.api.shoppingindexgoodindexsuborder({
|
||||
type: this.formlist.type,
|
||||
goods_id: this.formlist.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: this.formlist.car_id, //购物车ID 1,2 购物车来源时必填
|
||||
number: this.formlist.number, //数量 商品详情页来源时必填
|
||||
spec: this.formlist.spec, //规格 商品详情页来源时必填
|
||||
address_id: this.formlist.address_id, //地址ID 可以为空(为空时返回默认地址)
|
||||
pay_type: this.pay_type ,//1微信 2余额卡
|
||||
order_id:this.formlist.order_id
|
||||
})
|
||||
console.log(datareslane, 280)
|
||||
if (datareslane.data) {
|
||||
let res = await this.api.shoppingindexgoodindexgetpayparams({
|
||||
order_id: datareslane.data.order_id,
|
||||
sec_password: this.ucodeinputvalue //安全密码 余额卡支付时有效
|
||||
}) //判断是否支付成功
|
||||
this.ucodeinputvalue = ''
|
||||
console.log(res, 287)
|
||||
if (res.data.pay_status == 0) {
|
||||
this.showpopup = false
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.pay_data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.pay_data.payTimeStamp, // 时间戳(单位:秒)
|
||||
nonceStr: res.data.pay_data.paynonceStr, // 随机字符串
|
||||
package: res.data.pay_data.payPackage, // 固定值
|
||||
signType: res.data.pay_data.paySignType, //固定值
|
||||
paySign: res.data.pay_data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/index?e=" +0,
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: "/pages/mall/order/ordersuccess?id=" + datareslane.data.order_id,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || res.msg,
|
||||
icon: "none",
|
||||
success() {
|
||||
setTimeout(res => {
|
||||
// if (options.toast) {
|
||||
uni.hideLoading()
|
||||
// }
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
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();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.onecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.onecontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.onecontent_one {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontent_tow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontentaddress {
|
||||
.onecontentaddressone {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontentaddresstow {
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttow {
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem {
|
||||
margin-top: 24rpx;
|
||||
width: 100%;
|
||||
|
||||
.onecontenttowitem_one {
|
||||
.onecontenttowitemimage {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.onecontenttowitem_onebox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.onecontenttowitem_onebox_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onecontenttowitem_tow {
|
||||
.onecontenttowitem_towstext_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.onecontenttowitem_towstetx_tow {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: DIN Alternate-Bold, DIN Alternate;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fivecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fivecontentitem:nth-child(2) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.fivecontentitem {
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fivecontentitem_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fivecontentitem_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.therecontenttow {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.therecontenttow_one {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.therecontenttow_tow {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.fourcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fourcontenttow {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-popupflex-colum {
|
||||
padding: 80rpx 40rpx;
|
||||
border-radius: 50rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.u-popupflex-columview {
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,342 +0,0 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-center">
|
||||
<view style="margin-right: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
<u-icon name="error-circle" color="#fff" size="32"></u-icon>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">积分明细</view>
|
||||
<!-- <view class="shop_contenbox flex-start">
|
||||
<view class="shop_contenboxitem" :class="index == 0?'shop_contenboxitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="shop_contenlist">
|
||||
<view class="shop_contenlistabsolute">
|
||||
<view class="flex-start">
|
||||
<text class="flex-starttext">收入</text>
|
||||
/
|
||||
<text>支出</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitem flex-between" v-for="(item,index) in 6" :key="index">
|
||||
<view class="shop_contenlistitemone flex-colum-start">
|
||||
<view>交易积分-线下收款</view>
|
||||
<view>2023-01-11 17:33:09</view>
|
||||
</view>
|
||||
<view class="shop_contenlistitemtow">+0.02</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad(e) {
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.menuInfo = res
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #endif
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
padding: 6rpx 10rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 32rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 74rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
background: #FFFFFF;
|
||||
border-radius: 26rpx 26rpx 0rpx 0rpx;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
top: -92rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
padding: 16rpx 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_contenbox {
|
||||
padding: 0 60rpx;
|
||||
|
||||
.shop_contenboxitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenboxitem {
|
||||
margin-left: 24rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenboxitems {
|
||||
background: #F1CB66;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlist {
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
background: #fff;
|
||||
|
||||
.shop_contenlistabsolute {
|
||||
position: absolute;
|
||||
top: -32rpx;
|
||||
right: 32rpx;
|
||||
|
||||
.flex-start {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
|
||||
.flex-starttext {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitem {
|
||||
padding: 32rpx 44rpx;
|
||||
border-bottom: 2rpx solid #E5E5E5;
|
||||
|
||||
.shop_contenlistitemone {
|
||||
view:nth-child(1) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
margin-top: 16rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contenlistitemtow {
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,419 +0,0 @@
|
||||
<template>
|
||||
<view id="wrapper">
|
||||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||||
<view class="left-btn">
|
||||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||||
@click="navClickHandle(1)">
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||||
</view>
|
||||
<view class="left-btntitle"
|
||||
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
||||
积分商城
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-cover">
|
||||
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
||||
</image>
|
||||
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
||||
<view class="shop-coveronebox flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-coveroneboxnuber">
|
||||
5830
|
||||
</view>
|
||||
<navigator url="/pages/user/shop/detail" hover-class="navigator-hover"
|
||||
class="shop-coveroneboxdetail flex-start">
|
||||
<view style="margin-right: 20rpx;">
|
||||
积分明细
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
|
||||
</navigator>
|
||||
<view class="shop-coveroneinput flex-start">
|
||||
<u-search shape="round" searchIconSize='32rpx' height='100%' bgColor='#fff' placeholder="请输入商品"
|
||||
:animation="true" :clearabled="true" v-model="keyword"></u-search>
|
||||
<view class="shop-coveroneinputsouso">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_content">
|
||||
<view class="shop_contenttitle">
|
||||
<view class="shop_contenttitleitem" :class="index == 1?'shop_contenttitleitems':''"
|
||||
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlist flex-between">
|
||||
<view class="shop_contentlistitem flex-colum-start" @click="clickshopinfo(item)"
|
||||
v-for="(item,index) in 4" :key="index">
|
||||
<image class="shop_contentlistitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<view class="shop_contentlistitemone">
|
||||
澳洲高级洗发水
|
||||
</view>
|
||||
<view class="shop_contentlistitemtow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view>
|
||||
30积分
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop_contentlistitemthere flex-between">
|
||||
<view>
|
||||
市场价¥100.00
|
||||
</view>
|
||||
<view>
|
||||
已兑换0390件
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
menuInfo: {},
|
||||
paddingBtmSize: 6,
|
||||
isFixed: false,
|
||||
active: 0,
|
||||
titleTopNums: [],
|
||||
shopcontenboxlsit: [{
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
name: '交易积分'
|
||||
}, {
|
||||
name: '活动积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}, {
|
||||
name: '任务积分'
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
||||
this.isFixed = true;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
});
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#000000'
|
||||
});
|
||||
}
|
||||
this.countScrollTitle(e.scrollTop);
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS || H5
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
console.log(e)
|
||||
this.menuInfo = e
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||
// #endif
|
||||
},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickshopinfo(item) {
|
||||
uni.pro.navigateTo('user/shop/shopinfo', {
|
||||
item: item
|
||||
})
|
||||
},
|
||||
// 导航栏点击
|
||||
navClickHandle(t) {
|
||||
switch (t) {
|
||||
case 1:
|
||||
// 返回
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
countScrollTitle: _.throttle(function(top) {
|
||||
if (this.titleTopNums.length > 1) {
|
||||
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
||||
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
||||
this.titleTopNumIndex = i;
|
||||
}
|
||||
}
|
||||
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
||||
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
||||
}
|
||||
}
|
||||
}, 100),
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$bg: #fafafa;
|
||||
$tabLeft: 200upx;
|
||||
$itemH: 100upx;
|
||||
$cartH: 90upx;
|
||||
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 97;
|
||||
|
||||
&.is-fixed {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
.left-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
|
||||
.left-btntitle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
text-align: center;
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: 2;
|
||||
// background-color: rgba(0, 0, 0, 0.3);
|
||||
// }
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.shop-coverone {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0rpx 32rpx;
|
||||
z-index: 2;
|
||||
|
||||
.shop-coveronebox {
|
||||
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-coveroneboxnuber {
|
||||
margin-top: 8rpx;
|
||||
font-family: Roboto, Roboto;
|
||||
font-weight: bold;
|
||||
font-size: 74rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop-coveroneboxdetail {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop-coveroneinput {
|
||||
margin-top: 32rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
|
||||
.shop-coveroneinputsouso {
|
||||
border-left: 2rpx solid #E8E8E8;
|
||||
height: 100%;
|
||||
padding: 4rpx 28rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
line-height: 60 rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop_content {
|
||||
position: relative;
|
||||
top: 0rpx;
|
||||
margin-top: -24rpx;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
||||
padding: 0 28rpx 28rpx 28rpx;
|
||||
|
||||
.shop_contenttitle {
|
||||
width: 100%;
|
||||
padding-top: 32rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
|
||||
.shop_contenttitleitem:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.shop_contenttitleitem {
|
||||
margin-left: 18rpx;
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.shop_contenttitleitems {
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contentlist {
|
||||
.shop_contentlistitem {
|
||||
margin-top: 32rpx;
|
||||
width: 48%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.shop_contentlistitemimage {
|
||||
width: 100%;
|
||||
height: 296rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
}
|
||||
|
||||
.shop_contentlistitemone {
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shop_contentlistitemtow {
|
||||
padding: 16rpx 16rpx 0 16rpx;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
margin-left: 6rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #FF981E;
|
||||
}
|
||||
}
|
||||
|
||||
.shop_contentlistitemthere {
|
||||
padding: 16rpx;
|
||||
width: 100%;
|
||||
|
||||
view:nth-child(1) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-decoration-line: line-through;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
view:nth-child(2) {
|
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,560 +0,0 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="contentimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/ewm.png" mode="aspectFill"></image>
|
||||
<view class="contentbox">
|
||||
<view class="contentbox_one">
|
||||
111
|
||||
</view>
|
||||
<view class="contentbox_tow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentboxtow">
|
||||
<view class="onecontentterewone flex-start">
|
||||
<view class="onecontenttereone_one">
|
||||
商品详情
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="introduction_yow" v-html="list.details">
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview flex-between">
|
||||
<view class="fixedview_letr flex-start">
|
||||
<view class="fixedview_letr_item flex-colum" @click="eeInfoindex">
|
||||
<image src="@/static/shop/s.png" mode="aspectFill"></image>
|
||||
<text>首页</text>
|
||||
</view>
|
||||
<view class="fixedview_letr_item flex-colum" @click="makePhoneCall">
|
||||
<image src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow flex-between">
|
||||
<view class="fixedview_towtow" @click="overlayshowsboxs(2)">
|
||||
立即购买
|
||||
</view>
|
||||
<!-- <view class="fixedview_towtow" style="background: #ccc;">
|
||||
立即购买
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-overlay :show="overlayshow">
|
||||
<view class="warp">
|
||||
<view class="rect" @tap.stop>
|
||||
<view class="onerect flex-start">
|
||||
<image class="onecontentone_image" src="@/static/shop/k.png" mode="aspectFill"></image>
|
||||
<view class="nonecontentone_view flex-colum-start">
|
||||
<text class="nonecontentone_view_one">贝尔纳干红葡萄酒</text>
|
||||
<view class="nonecontentone_view_otow flex-start">
|
||||
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
||||
<view style="margin-left: 10rpx;">
|
||||
当前积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onerecticon" @click="overlayshow = false">
|
||||
<u-icon @click="overlayshow = false" name="close-circle-fill" color="#000000"
|
||||
size="32"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="towrect" v-for="(item,n) in list.spec" :key="item.id">
|
||||
<view class="towrect_one">
|
||||
{{item.spec_name}}
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<view class="towrect_tow" v-for="(item1,index1) in item.spec_options" :key="index1"
|
||||
@click="overlayshowsbox(item1,index1)">
|
||||
<view
|
||||
:class="[item1.isShow?'noneActive':'',towrecttowclass == index1?'towrect_towtext':'towrect_towtexts']">
|
||||
{{item1.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thererect flex-between">
|
||||
<view class="thererect_one">
|
||||
购买数量
|
||||
</view>
|
||||
<view class="thererect_tow">
|
||||
<u-number-box v-model="numberbox" :min="1" button-size="24" color="#ffffff"
|
||||
:bgColor="theme.cartpieces" iconStyle="color: #fff" integer></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fuorrect flex-between">
|
||||
<view class="fuorrect_one">
|
||||
合计
|
||||
</view>
|
||||
<view class="fuorrect_tow">
|
||||
¥100
|
||||
</view>
|
||||
</view>
|
||||
<view class="fvirect flex-center" @click="requestSubscribeMessage">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-overlay>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
goods_id: '',
|
||||
overlayshow: false,
|
||||
towrecttowclass: 0,
|
||||
numberbox: 1,
|
||||
list: {},
|
||||
height: '',
|
||||
lsitform: {},
|
||||
selectArr: [], //存放被选中的值
|
||||
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
|
||||
subIndex: [], //是否选中 因为不确定是多规格还是单规格,所以这里定义数组来判断
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
onLoad(e) {
|
||||
this.goods_id = e.id
|
||||
},
|
||||
onShow() {},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
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();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
makePhoneCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.list.mobile //打电话
|
||||
});
|
||||
},
|
||||
overlayshowsboxs(e) {
|
||||
this.cartshping = e
|
||||
this.overlayshow = true
|
||||
|
||||
},
|
||||
async overlayshowsbox(item1, index1) {
|
||||
this.towrecttowclass = index1
|
||||
this.lsitform = item1
|
||||
this.lsitform.title_name = item1.title_name
|
||||
// this.lsitform.name = item1.name
|
||||
console.log(this.lsitform)
|
||||
},
|
||||
async requestSubscribeMessage() {
|
||||
// if (this.lsitform.id == '' || this.lsitform.id == null) {
|
||||
// uni.showToast({
|
||||
// title: '请选择合法规格',
|
||||
// icon: 'none'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// if (this.cartshping == 1) {
|
||||
// this.$u.debounce(this.shoppingindexgoodindexsaddcar(), 200);
|
||||
// } else {
|
||||
uni.pro.navigateTo('user/shop/confirm', {
|
||||
type: 2, // 1购物车 2商品详情页
|
||||
goods_id: this.goods_id, //商品ID 商品详情页来源时必填
|
||||
car_id: '', //购物车ID 1,2 购物车来源时必填
|
||||
number: this.numberbox, //商品详情页来源时必填
|
||||
spec: this.lsitform.name, //规格 商品详情页来源时必填
|
||||
address_id: '', //地址ID 可以为空(为空时返回默认地址)
|
||||
})
|
||||
// }
|
||||
},
|
||||
async shoppingindexgoodindexsaddcar() {
|
||||
let res = await this.api.shoppingindexgoodindexsaddcar({
|
||||
number: this.numberbox,
|
||||
goods_id: this.goods_id,
|
||||
spec: this.lsitform.name,
|
||||
})
|
||||
if (res == 1) {
|
||||
this.overlayshow = false
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '添加购物车成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
eeInfoindex() { //去首页
|
||||
uni.pro.navigateTo('user/shop/index')
|
||||
},
|
||||
async shoppingindexgoodsgoodsdetail() {
|
||||
let res = await this.api.shoppingindexgoodsgoodsdetail({
|
||||
goods_id: this.goods_id
|
||||
})
|
||||
this.list = res
|
||||
this.lsitform = res.spec[0]
|
||||
this.lsitform.title_name = res.spec[0].title
|
||||
this.lsitform.img = res.host_img
|
||||
this.list.details = res.details.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig,
|
||||
'style="max-width:100%;height:auto;"') // 替换style
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_letr {
|
||||
.fixedview_letr_item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fixedview_letr_item {
|
||||
margin-left: 32rpx;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex: auto;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.fixedview_towone {
|
||||
// width: 50%;
|
||||
// font-size: 28rpx;
|
||||
// font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
// font-weight: bold;
|
||||
// color: var(--cart-text-color);
|
||||
// height: 72rpx;
|
||||
// line-height: 72rpx;
|
||||
// text-align: center;
|
||||
// border-radius: 50rpx 0 0 50rpx;
|
||||
// background: var(--cart-background-color);
|
||||
}
|
||||
|
||||
.fixedview_towtow {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
border-radius: 50rpx;
|
||||
background: #F1CB66;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
|
||||
image {
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.nonecontentone_view {
|
||||
|
||||
margin-left: 16rpx;
|
||||
|
||||
.nonecontentone_view_one {
|
||||
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: #1A1A1A;
|
||||
}
|
||||
|
||||
.nonecontentone_view_otow {
|
||||
margin-top: 10rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onerecticon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.towrect {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
padding-top: 34rpx;
|
||||
|
||||
.towrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.towrect_tow {
|
||||
margin-top: 16rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.noneActive {
|
||||
background-color: #ccc;
|
||||
opacity: 0.4;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.towrect_towtext {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #4F5066;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
|
||||
.towrect_towtexts {
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #4F5066;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.thererect {
|
||||
padding: 34rpx 0;
|
||||
border-bottom: 1rpx solid #F7F7F7;
|
||||
border-top: 1rpx solid #F7F7F7;
|
||||
|
||||
.thererect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.thererect_tow {}
|
||||
}
|
||||
|
||||
.fuorrect {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.fuorrect_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.fuorrect_tow {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.fvirect {
|
||||
margin-top: 200rpx;
|
||||
padding: 16rpx;
|
||||
text-align: center;
|
||||
background: #F1CB66;
|
||||
border-radius: 40rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.contentimage {
|
||||
width: 100%;
|
||||
height: 528rpx;
|
||||
}
|
||||
|
||||
.contentbox {
|
||||
padding: 28rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.contentbox_one {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.contentbox_tow {
|
||||
margin-top: 12rpx;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #FF981E;
|
||||
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentboxtow {
|
||||
margin-top: 14rpx;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.onecontentterewone::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4rpx;
|
||||
height: 24rpx;
|
||||
background: #febc46;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.onecontentterewone {
|
||||
.onecontenttereone_one {
|
||||
margin-left: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #1A1A1A;
|
||||
|
||||
text {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.introduction_yow {
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #1A1A1A;
|
||||
width: 100%;
|
||||
|
||||
/deep/ [alt] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ p {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,236 +1,117 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- <view class="user-info-wrap" @click="clickinformation">
|
||||
<view style="width: 108rpx; height: 108rpx;border-radius: 50%;">
|
||||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
|
||||
:src="userInfo.headImg" mode="aspectFill">
|
||||
</image>
|
||||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-else src="@/static/avatar.png"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
<view class="user-info-wrap">
|
||||
<view style="width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
|
||||
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
||||
</image>
|
||||
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
|
||||
</image>
|
||||
</button>
|
||||
</view>
|
||||
<view class="info flex-colum-start">
|
||||
<text class="phone">{{userInfo.nickName || '无'}}</text>
|
||||
<!-- <view class="name"><input type="nickname" @blur="blurname"
|
||||
v-model="userInfo.nickName" placeholder="请输入昵称"></view> -->
|
||||
<text class="phone">{{userInfo.telephone || '无'}}</text>
|
||||
|
||||
<!-- <text class="phone">1882177889</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="header-wrap">
|
||||
<view class="header">
|
||||
<text class="title">我的订单</text>
|
||||
<view class="more" @click="orderHandle(1)">
|
||||
<text class="t">全部订单</text>
|
||||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-menu">
|
||||
<view class="item" @click="orderHandle(2)">
|
||||
<image class="icon" src="@/static/user_icon1.png" mode="aspectFit"></image>
|
||||
<text class="t">待付款</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(3)">
|
||||
<image class="icon" src="@/static/user_icon2.png" mode="aspectFit"></image>
|
||||
<text class="t">待发货</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(4)">
|
||||
<image class="icon" src="@/static/user_icon3.png" mode="aspectFit"></image>
|
||||
<text class="t">已完成</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(5)">
|
||||
<image class="icon" src="@/static/user_icon4.png" mode="aspectFit"></image>
|
||||
<text class="t">退款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="card">
|
||||
<view class="header-wrap">
|
||||
<view class="header">
|
||||
<text class="title">更多服务</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-menu">
|
||||
<navigator class="item" hover-class="none" url="/pages/user/coupon">
|
||||
<image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image>
|
||||
<text class="t">优惠券</text>
|
||||
</navigator>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image>
|
||||
<text class="t">寄存记录</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image>
|
||||
<text class="t">储值明细</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image>
|
||||
<text class="t">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<navseat :opacity='opacity' class="navseat" title='个人中心' :iconshow="false" :titleshow='true'></navseat>
|
||||
<view class="boxtop">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view :style="{'height':Topdistance+'px'}"></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px'}"></view>
|
||||
<!-- #endif -->
|
||||
<view class="boxtop_top flex-between">
|
||||
<view class="boxtop_topleft">
|
||||
<view class="flex-start" v-if="userInfo" @click="clickinformation">
|
||||
<image style="width: 108rpx; height: 108rpx; border-radius: 50%;" v-if="userInfo.headImg"
|
||||
:src="userInfo.headImg" mode="aspectFill">
|
||||
</image>
|
||||
<text>{{userInfo.nickName || '无'}}</text>
|
||||
</view>
|
||||
<view class="flex-start" v-else @click="loginClick">
|
||||
<text>去登录</text>
|
||||
</view>
|
||||
</view>
|
||||
<image style="width: 44rpx; height: 42.26rpx;" @click="clickphone()"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/kf.png" mode="aspectFill">
|
||||
</view>
|
||||
|
||||
<image @click="memberlist" class="boxtop_botton"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/member.png" mode="aspectFit"></image>
|
||||
<view class="version-wrap">
|
||||
<!-- <text class="t">版本号:2.0.0</text> -->
|
||||
<text class="t">陕西超掌柜科技有限公司</text>
|
||||
</view>
|
||||
<view class="userinfoone" v-if="teblist.length!=0">
|
||||
<view class="userinfoonebox">
|
||||
<view class="userinfooneboxitem flex-between" @click="clickinfo(item,index)"
|
||||
v-for="(item,index) in teblist" :key="index">
|
||||
<view class="userinfooneboxitemleft flex-start">
|
||||
<image :src="item.shareImg" mode="aspectFill"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<listitem :list='list' v-if="list.length!=0"></listitem>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
import listitem from "@/components/listitem.vue";
|
||||
import navseat from '@/components/navseat.vue'
|
||||
export default {
|
||||
components: {
|
||||
listitem,
|
||||
navseat
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titlename: '个人中心',
|
||||
opacity: false,
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
teblist: [],
|
||||
list: [],
|
||||
Topdistance: '',
|
||||
shopInfo:{}
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
this.GetTop()
|
||||
});
|
||||
}, 1000)
|
||||
// 当组件挂载完成后获取距离
|
||||
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.init_fn()
|
||||
this.loginwxuserInfo()
|
||||
this.tbPlatformDict()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickphone() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: uni.cache.get('userInfo').custPhone
|
||||
});
|
||||
},
|
||||
clickinformation() {
|
||||
uni.pro.navigateTo('user/information')
|
||||
},
|
||||
//获取元素距离顶部的距离
|
||||
GetTop() {
|
||||
this.$u.getRect('.content').then(res => {
|
||||
console.log(1111, res)
|
||||
this.Topdistance = res.height //滚动距离
|
||||
})
|
||||
},
|
||||
memberlist() {
|
||||
if (uni.cache.get('token')) {
|
||||
uni.pro.navigateTo('member/list')
|
||||
} else {
|
||||
this.loginClick()
|
||||
}
|
||||
},
|
||||
//退出登录
|
||||
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'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
loginClick() {
|
||||
uni.cache.clear();
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
},
|
||||
// 精选推荐
|
||||
// 下面初始数据
|
||||
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: '', //品类
|
||||
orderBy: 5, //0.今日上新 1.离我最近 2.销量优先 3.价格优先 4.热榜推荐
|
||||
other: '', //附近1KM 1选中 0不选中
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
dateType: '',
|
||||
status: 'loadmore'
|
||||
}
|
||||
this.onLoadlist()
|
||||
},
|
||||
async onLoadlist() {
|
||||
try {
|
||||
let res = await this.api.indexlist(this.form)
|
||||
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) {}
|
||||
},
|
||||
clickinfo(item, index) {
|
||||
switch (item.jumpType) {
|
||||
case 'scan': //特殊处理点击
|
||||
switch (item.value) {
|
||||
case 'loginOut':
|
||||
this.boxClick()
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'scan_applet':
|
||||
uni.navigateToMiniProgram(JSON.parse(item.value))
|
||||
break
|
||||
case 'relative': //内部页面
|
||||
uni.pro.navigateTo(item.absUrl)
|
||||
break;
|
||||
case 'absolute': //外链url
|
||||
uni.navigateTo({
|
||||
url: `/pages/webview/webview?url=${item.menuUrl}`
|
||||
});
|
||||
break;
|
||||
}
|
||||
blurname(e) {
|
||||
console.log(e);
|
||||
this.userlist.nickname = e.detail.value
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data);
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
}
|
||||
},
|
||||
async tbPlatformDict() {
|
||||
let res = await this.api.tbPlatformDict({
|
||||
type: 'ownMenu'
|
||||
})
|
||||
// console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.teblist = res.data
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
// / 更换头像
|
||||
@@ -268,14 +149,22 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 $paddingSize;
|
||||
}
|
||||
|
||||
.user-info-wrap {
|
||||
position: relative;
|
||||
padding: 48rpx 32rpx 88rpx 32rpx;
|
||||
padding: $paddingSize + 20upx $paddingSize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 750rpx;
|
||||
background: #FFD158;
|
||||
border-radius: 0rpx 0rpx 40rpx 0rpx;
|
||||
|
||||
.avatar {
|
||||
$size: 120upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
@@ -296,89 +185,63 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-wrap::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 40rpx;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
background-image: radial-gradient(40rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||
}
|
||||
.card {
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: $paddingSize;
|
||||
|
||||
.boxtop {
|
||||
width: 100%;
|
||||
height: 542rpx;
|
||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/user.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.header-wrap {
|
||||
padding: 0 $paddingSize;
|
||||
}
|
||||
|
||||
.boxtop_top {
|
||||
padding: 0 32rpx;
|
||||
margin-top: 52rpx;
|
||||
.header {
|
||||
padding: 38upx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #f2f2f2;
|
||||
|
||||
.boxtop_topleft {
|
||||
.flex-start {
|
||||
text {
|
||||
margin-left: 18rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
color: #999;
|
||||
margin-right: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxtop_botton {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translatex(-50%);
|
||||
width: 654rpx;
|
||||
height: 160rpx;
|
||||
.order-menu {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 38upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 68upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.t {
|
||||
padding-top: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userinfoone {
|
||||
position: relative;
|
||||
padding: 48rpx 28rpx;
|
||||
width: 100%;
|
||||
// top: -40rpx;
|
||||
background: #F6F6F6;
|
||||
// border-radius: 40rpx 0 0rpx 0rpx;
|
||||
.version-wrap {
|
||||
padding: 100upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.userinfoonebox {
|
||||
padding: 32rpx 20rpx 32rpx 52rpx;
|
||||
border-radius: 22rpx;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
|
||||
.userinfooneboxitem {
|
||||
width: 100%;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.userinfooneboxitemleft {
|
||||
image {
|
||||
width: 41.33rpx;
|
||||
height: 36.9rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-left: 32rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.userinfooneboxitem:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.t {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user