Merge pull request '提交优化' (#9) from Branch_ccc into master
Reviewed-on: #9
This commit is contained in:
commit
3493acb7f5
12
.env
12
.env
@ -3,11 +3,19 @@ SHOPRO_VERSION = v1.8.3
|
||||
|
||||
# 后端接口 - 正式环境（通过 process.env.NODE_ENV 非 development）
|
||||
SHOPRO_BASE_URL = https://zysc.fjptzykj.com
|
||||
#SHOPRO_BASE_URL = http://192.168.1.20:6127
|
||||
#SHOPRO_BASE_URL = http://192.168.1.12:6127
|
||||
#SHOPRO_BASE_URL = http://124.222.208.27:6127
|
||||
#SHOPRO_BASE_URL = http://192.168.1.9:6127
|
||||
#SHOPRO_BASE_URL = http://192.168.1.8:6127
|
||||
#SHOPRO_BASE_URL = http://192.168.1.7:6127
|
||||
|
||||
# 后端接口 - 测试环境（通过 process.env.NODE_ENV = development）
|
||||
SHOPRO_DEV_BASE_URL = https://zysc.fjptzykj.com
|
||||
#SHOPRO_DEV_BASE_URL = http://192.168.1.20:6127
|
||||
#SHOPRO_DEV_BASE_URL = http://192.168.1.12:6127
|
||||
#SHOPRO_DEV_BASE_URL = http://124.222.208.27:6127
|
||||
#SHOPRO_DEV_BASE_URL = http://192.168.1.9:6127
|
||||
#SHOPRO_DEV_BASE_URL = http://192.168.1.8:6127
|
||||
#SHOPRO_DEV_BASE_URL = http://192.168.1.7:6127
|
||||
|
||||
# 后端接口前缀（一般不建议调整）
|
||||
SHOPRO_API_PATH = /app-api
|
||||
|
||||
34
pages.json
34
pages.json
@ -378,6 +378,18 @@
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "user_vip/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员页面"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true,
|
||||
"sync": true,
|
||||
"title": "会员页面",
|
||||
"group": "用户中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods-collect",
|
||||
"style": {
|
||||
@ -767,6 +779,28 @@
|
||||
"title": "兑换记录",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/exchange_success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换成功"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "兑换成功",
|
||||
"group": "营销活动"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/exchange_detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换详情"
|
||||
},
|
||||
"meta": {
|
||||
"sync": true,
|
||||
"title": "兑换详情",
|
||||
"group": "营销活动"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
404
pages/activity/point/exchange_detail.vue
Normal file
404
pages/activity/point/exchange_detail.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<!-- 积分商城：商品列表 -->
|
||||
<template>
|
||||
<s-layout title="兑换详情" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||
<view class="main">
|
||||
<!-- 收货地址 -->
|
||||
<view class="t-address">
|
||||
<view class="t">
|
||||
<text class="l">{{ state.orderInfo.receiverName }}</text>
|
||||
<text class="r">{{ state.orderInfo.receiverMobile }}</text>
|
||||
</view>
|
||||
<view class="b">
|
||||
{{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
|
||||
</view>
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png"
|
||||
class="img"></image>
|
||||
</view>
|
||||
|
||||
<view class="c-goods">
|
||||
<view class="t">
|
||||
共{{state.orderInfo.productCount}}件商品
|
||||
</view>
|
||||
|
||||
<view class="b-detail" v-for="(item,index) in state.orderInfo.items" :key="item.goods_id">
|
||||
<image :src="item.picUrl" class="img" mode=""></image>
|
||||
<view class="right">
|
||||
<view class="t">
|
||||
<view class="ss-line-2" style=" width: 88%;">
|
||||
{{item.spuName}}
|
||||
</view>
|
||||
<text class="r">x{{item.count}}</text>
|
||||
</view>
|
||||
<view class="c">
|
||||
{{item.properties.map((property) => property.valueName).join(' ')}}
|
||||
</view>
|
||||
<view class="b">
|
||||
10积分（待对接接口）
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="b-goodsDetail">
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
订单编号:
|
||||
</view>
|
||||
<view class="r">
|
||||
{{ state.orderInfo.no }}
|
||||
<view class="copy-btn" @click="onCopy">
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
订单状态:
|
||||
</view>
|
||||
<view class="r">
|
||||
{{ formatOrderStatus(state.orderInfo) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
下单时间:
|
||||
</view>
|
||||
<view class="r">
|
||||
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
支付积分
|
||||
</view>
|
||||
<view class="r">
|
||||
10（待接口对接）
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash-es';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatOrderStatus,
|
||||
formatOrderStatusDescription,
|
||||
handleOrderButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import DeliveryApi from '@/sheep/api/trade/delivery';
|
||||
import PickUpVerify from '@/pages/order/pickUpVerify.vue';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
|
||||
|
||||
const state = reactive({
|
||||
orderInfo: {},
|
||||
merchantTradeNo: '', // 商户订单号
|
||||
comeinType: '', // 进入订单详情的来源类型
|
||||
});
|
||||
|
||||
// ========== 门店自提（核销） ==========
|
||||
const systemStore = ref({}); // 门店信息
|
||||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.orderInfo.no);
|
||||
};
|
||||
|
||||
// 去支付
|
||||
function onPay(payOrderId) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
id: payOrderId,
|
||||
});
|
||||
}
|
||||
|
||||
// 查看商品
|
||||
function onGoodsDetail(id) {
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消订单吗?',
|
||||
success: async function(res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
code
|
||||
} = await OrderApi.cancelOrder(orderId);
|
||||
if (code === 0) {
|
||||
await getOrderDetail(orderId);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(id) {
|
||||
sheep.$router.go('/pages/order/express/log', {
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
// 确认收货 TODO 芋艿：待测试
|
||||
async function onConfirm(orderId, ignore = false) {
|
||||
// 需开启确认收货组件
|
||||
// todo: 芋艿：待接入微信
|
||||
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
|
||||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true;
|
||||
if (
|
||||
sheep.$platform.name === 'WechatMiniProgram' &&
|
||||
!isEmpty(state.orderInfo.wechat_extra_data) &&
|
||||
isOpenBusinessView &&
|
||||
!ignore
|
||||
) {
|
||||
mpConfirm(orderId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 正常的确认收货流程
|
||||
const {
|
||||
code
|
||||
} = await OrderApi.receiveOrder(orderId);
|
||||
if (code === 0) {
|
||||
await getOrderDetail(orderId);
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序确认收货组件
|
||||
function mpConfirm(orderId) {
|
||||
if (!wx.openBusinessView) {
|
||||
sheep.$helper.toast(`请升级微信版本`);
|
||||
return;
|
||||
}
|
||||
wx.openBusinessView({
|
||||
businessType: 'weappOrderConfirm',
|
||||
extraData: {
|
||||
merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
|
||||
transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
|
||||
},
|
||||
success(response) {
|
||||
console.log('success:', response);
|
||||
if (response.errMsg === 'openBusinessView:ok') {
|
||||
if (response.extraData.status === 'success') {
|
||||
onConfirm(orderId, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(error) {
|
||||
console.log('error:', error);
|
||||
},
|
||||
complete(result) {
|
||||
console.log('result:', result);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// 评价
|
||||
function onComment(id) {
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
const pickUpVerifyRef = ref();
|
||||
|
||||
async function getOrderDetail(id) {
|
||||
// 对详情数据进行适配
|
||||
let res;
|
||||
if (state.comeinType === 'wechat') {
|
||||
// TODO 芋艿：微信场景下
|
||||
res = await OrderApi.getOrder(id, {
|
||||
merchant_trade_no: state.merchantTradeNo,
|
||||
});
|
||||
} else {
|
||||
res = await OrderApi.getOrder(id);
|
||||
}
|
||||
if (res.code === 0) {
|
||||
state.orderInfo = res.data;
|
||||
handleOrderButtons(state.orderInfo);
|
||||
// 配送方式：门店自提
|
||||
if (res.data.pickUpStoreId) {
|
||||
const {
|
||||
data
|
||||
} = await DeliveryApi.getDeliveryPickUpStore(res.data.pickUpStoreId);
|
||||
systemStore.value = data || {};
|
||||
}
|
||||
if (state.orderInfo.deliveryType === 2 && state.orderInfo.payStatus) {
|
||||
pickUpVerifyRef.value && pickUpVerifyRef.value.markCode(res.data.pickUpVerifyCode);
|
||||
}
|
||||
} else {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = 0;
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
// TODO 芋艿：下面两个变量，后续接入
|
||||
state.comeinType = options.comein_type;
|
||||
if (state.comeinType === 'wechat') {
|
||||
state.merchantTradeNo = options.merchant_trade_no;
|
||||
}
|
||||
await getOrderDetail(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.main {
|
||||
.t-address {
|
||||
margin: 9px 0;
|
||||
padding: 15px 10px;
|
||||
background: white;
|
||||
padding-bottom: 0;
|
||||
|
||||
.t {
|
||||
font-size: 30rpx;
|
||||
color: black;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.l {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.b {
|
||||
font-size: 26rpx;
|
||||
color: rgba(156, 143, 114);
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.c-goods {
|
||||
margin: 9px 0;
|
||||
padding: 15px 10px;
|
||||
background: white;
|
||||
|
||||
&>.t {
|
||||
font-size: 30rpx;
|
||||
border-bottom: 1px solid rgba(240, 240, 240);
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.b-detail {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
|
||||
.img {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
.t {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.r {
|
||||
color: rgba(134, 139, 151);
|
||||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
margin: 10px 0;
|
||||
color: rgba(134, 139, 151);
|
||||
}
|
||||
|
||||
.b {
|
||||
color: rgba(254, 94, 51);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-goodsDetail {
|
||||
margin: 9px 0;
|
||||
padding: 7px 10px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.ddxx {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
|
||||
.l {
|
||||
font-size: 15px;
|
||||
|
||||
.r {}
|
||||
}
|
||||
|
||||
.r {
|
||||
font-size: 14px;
|
||||
color: rgba(102, 102, 102);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.copy-btn {
|
||||
width: 3.125rem;
|
||||
line-height: 1.5625rem;
|
||||
border-radius: 0.78125rem;
|
||||
padding: 0;
|
||||
background: #eeeeee;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
&:after {
|
||||
content: ' ';
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
pages/activity/point/exchange_list.vue
Normal file
218
pages/activity/point/exchange_list.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<s-layout title="兑换记录" color="white" :bgStyle="{ color: '#fff' }" opacityBgUi=""
|
||||
navbarbackgroundColor="rgba(193,145,81)">
|
||||
<view class="container">
|
||||
<view class="card" v-for="(item, index) in reservationList" :key="index">
|
||||
<view class="top">
|
||||
订单时间:
|
||||
{{
|
||||
sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd')
|
||||
}}
|
||||
</view>
|
||||
<view class="left">
|
||||
<image :src="item.picUrl" class="img"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class='t ss-line-2'>{{item.name}}</view>
|
||||
<!-- <view class='c'>共<text class="c-t">{{item.count}}</text>件商品</view>
|
||||
<view class='b'>来自:</view> -->
|
||||
<view class="card-bottom">
|
||||
<view class="card-left">
|
||||
<!-- <image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/d1dd98b6a37ea9ea90c49898024d3669a54ee2a48f028b671609937b6b1250af.png"
|
||||
class="img" mode=""></image> -->
|
||||
<!-- <text class="card-c">×</text> -->
|
||||
<view class="card-r">-{{item.usePoint}} 积分</view>
|
||||
</view>
|
||||
<view class="r-cart" @click="sheep.$router.go('/pages/activity/point/exchange_detail', { id: '1' })">查看详情</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="r-cart r-top" :class="item.status == 40 ? 'hui' : ''">{{item.label}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import request from '@/sheep/request';
|
||||
import {
|
||||
baseUrl,
|
||||
apiPath
|
||||
} from '@/sheep/config';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
memberId: null,
|
||||
reservationList: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalPages: 1,
|
||||
sheep
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
request({
|
||||
// url: `${baseUrl}${apiPath}/h5/reservation/list`,
|
||||
url: `${baseUrl}${apiPath}/trade/order/getPointOrder`,
|
||||
method: 'GET',
|
||||
// params: {
|
||||
// userId: this.memberId,
|
||||
// },
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}).then((res) => {
|
||||
this.reservationList = res.data
|
||||
console.log('this.reservationList', this.reservationList)
|
||||
});
|
||||
// uni.request({
|
||||
// url: `${baseUrl}${apiPath}/h5/reservation/list`, // 接口地址
|
||||
// data: {
|
||||
// userId:this.memberId,
|
||||
// },
|
||||
// success: (res) => {
|
||||
// console.log(res.data);
|
||||
// this.reservationList = res.data.rows
|
||||
// },
|
||||
// fail: (error) => {
|
||||
// console.log(error)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 100%;
|
||||
|
||||
.card {
|
||||
width: 86%;
|
||||
padding: 7px 15px;
|
||||
background: white;
|
||||
margin: 10px auto;
|
||||
border-radius: 13px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
box-shadow: 3px -2px 12px 7px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
padding-bottom: 6px;
|
||||
color: rgba(127, 128, 128);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.r-cart {
|
||||
// position:absolute;
|
||||
// top:0;
|
||||
// right:0;
|
||||
padding: 2px 11px;
|
||||
border-radius: 12px;
|
||||
height: 20px;
|
||||
line-height:20px;
|
||||
background: rgba(193, 145, 81);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
|
||||
&.hui {
|
||||
background: rgba(223, 241, 244);
|
||||
color: rgba(75, 79, 82);
|
||||
}
|
||||
|
||||
}
|
||||
.r-top{
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
background:rgba(242, 232, 218);
|
||||
border-radius: 0px 12px 0px 12px;
|
||||
color:rgba(163,109,45);
|
||||
}
|
||||
.left {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 10px;
|
||||
border-radius: 12px;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.t {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
|
||||
.c-t {
|
||||
color: #cccc08;
|
||||
}
|
||||
}
|
||||
|
||||
.b {
|
||||
font-size: 14px;
|
||||
color: #dbcccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-left {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.card-r {
|
||||
color: rgba(162, 75, 72);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
pages/activity/point/exchange_success.vue
Normal file
164
pages/activity/point/exchange_success.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<!-- 积分商城：商品列表 -->
|
||||
<template>
|
||||
<s-layout title="兑换成功" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||
<view class="main">
|
||||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/4fd1540f5e7c4545140fe1278fd6db65f18a3cd86bc866b24470b888bf6664fe.png" class="img" mode=""></image>
|
||||
<view class="title">商品兑换成功</view>
|
||||
<view class="fgx"></view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
订单编号
|
||||
</view>
|
||||
<view class="r">
|
||||
wx23556151561321321351213
|
||||
</view>
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
兑换时间
|
||||
</view>
|
||||
<view class="r">
|
||||
2024-10-18 15:46:03
|
||||
</view>
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
兑换方式
|
||||
</view>
|
||||
<view class="r">
|
||||
积分兑换
|
||||
</view>
|
||||
</view>
|
||||
<view class="ddxx">
|
||||
<view class="l">
|
||||
支付方式
|
||||
</view>
|
||||
<view class="r">
|
||||
10
|
||||
</view>
|
||||
</view>
|
||||
<view class="fgx"></view>
|
||||
|
||||
<view class="ck-detail">
|
||||
查看详情
|
||||
</view>
|
||||
<view class="bk-home">
|
||||
返回首页
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import PointApi from '@/sheep/api/promotion/point';
|
||||
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||
|
||||
// 计算页面高度
|
||||
const { safeAreaInsets, safeArea } = sheep.$platform.device;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
|
||||
const sPointCardRef = ref();
|
||||
// 查询活动列表
|
||||
const activityPageParams = reactive({
|
||||
pageNo: 1, // 页码
|
||||
pageSize: 5, // 每页数量
|
||||
});
|
||||
|
||||
const activityTotal = ref(0); // 活动总数
|
||||
const activityCount = ref(0); // 已加载活动数量
|
||||
const loadStatus = ref(''); // 页面加载状态
|
||||
async function getActivityList() {
|
||||
loadStatus.value = 'loading';
|
||||
const { data } = await PointApi.getPointActivityPage(activityPageParams);
|
||||
await sPointCardRef.value.concatActivity(data.list);
|
||||
activityCount.value = sPointCardRef.value.getActivityCount();
|
||||
activityTotal.value = data.total;
|
||||
|
||||
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
activityPageParams.pageNo += 1;
|
||||
getActivityList();
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
onLoad(() => {
|
||||
getActivityList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.main{
|
||||
background:white;
|
||||
width:85%;
|
||||
padding:15px;
|
||||
position:fixed;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
border-radius:12px;
|
||||
.img{
|
||||
width:80px;
|
||||
height:80px;
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
margin-top: -52px;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
margin:15px 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ddxx{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin:10px 0;
|
||||
.l{
|
||||
font-size: 17px;
|
||||
}
|
||||
.r{
|
||||
font-size: 16px;
|
||||
color:rbga(102,102,102);
|
||||
}
|
||||
}
|
||||
.fgx{
|
||||
margin: 20px 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background:rgba(239,239,239);
|
||||
}
|
||||
.ck-detail{
|
||||
// background: rgba(254,92,45);
|
||||
background: rgba(207,162,92);
|
||||
padding: 10px 0;
|
||||
color: white;
|
||||
font-size: 19px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
border-radius:31px;
|
||||
}
|
||||
.bk-home{
|
||||
border:1px solid rgba(207,162,92);
|
||||
padding: 10px 0;
|
||||
color: rgba(207,162,92);
|
||||
font-size: 19px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
border-radius:31px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -456,7 +456,8 @@
|
||||
.confirm-btn {
|
||||
width: 220rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
// background: linear-gradient(90deg, #ff6000, #fe832a);
|
||||
background: linear-gradient(90deg, #ff6000, #ff6000);
|
||||
box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
185
pages/app/signList.vue
Normal file
185
pages/app/signList.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<s-layout title="预约记录" :bgStyle="{ color: '#fff' }">
|
||||
<view class="container">
|
||||
<view class="cards">
|
||||
<view class="card" v-for="(item, index) in reservationList" :key="index">
|
||||
sss
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/sheep/request';
|
||||
import { computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
baseUrl,
|
||||
apiPath
|
||||
} from '@/sheep/config';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
memberId:null,
|
||||
reservationList: [],
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalPages: 1,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.memberId=computed(() => sheep.$store('user').userInfo).value.id
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
request({
|
||||
url: `${baseUrl}${apiPath}/h5/reservation/list`,
|
||||
method: 'GET',
|
||||
params:{
|
||||
userId:this.memberId,
|
||||
},
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}).then((res) => {
|
||||
this.reservationList = res.data.list
|
||||
});
|
||||
// uni.request({
|
||||
// url: `${baseUrl}${apiPath}/h5/reservation/list`, // 接口地址
|
||||
// data: {
|
||||
// userId:this.memberId,
|
||||
// },
|
||||
// success: (res) => {
|
||||
// console.log(res.data);
|
||||
// this.reservationList = res.data.rows
|
||||
// },
|
||||
// fail: (error) => {
|
||||
// console.log(error)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.address-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: center; */
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cards {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
/* width: calc(50% - 10px); */
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-contentinfo {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
/* display: flex;
|
||||
justify-content: space-between; */
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.technician {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.hospital,
|
||||
.technician,
|
||||
.type{
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
color: #161616;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.address{
|
||||
margin: 20px 0px 0px 20px ;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.health-list {
|
||||
background-color: #FFFFFF;
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
margin: 5PX;
|
||||
padding-left: 15px;
|
||||
padding-top: 10px;
|
||||
/* padding: 10px; */
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.health_title {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.health_title_img {
|
||||
float: left;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.health-title-title {
|
||||
float: none;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.time {
|
||||
/* margin-top: 20px; */
|
||||
font-size: 15px;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
</style>
|
||||
@ -117,7 +117,7 @@
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/02ee19a89858e3b1cf0de82867fb06f3ae7f57511130d0167205a97b99b796c7.png') no-repeat;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/423af1ff70d4e80ca7bd4ede17b9fe63800aaffd2e4e8b5b7584ab5bf5884996.png') no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
padding: 0 45rpx;
|
||||
|
||||
.new-btn {
|
||||
background: rgba(254, 104, 73);
|
||||
background: rgba(178, 102, 67);
|
||||
border-radius: 22px;
|
||||
padding: 8px 0;
|
||||
font-size: 16px;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<view class="new-ljsy">
|
||||
<view class="l dd">
|
||||
<view class="l-img">
|
||||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/a2aba0242cd2b7ec54518e2ec11651fba3154b5dff9bcd6323cbfa22d771a970.png" class="img"></image>
|
||||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/7624fd0e447748a5f8f4532d89a416cf7f962644e588c99d7e8c8baeab7ee91f.png" class="img"></image>
|
||||
</view>
|
||||
<view class="l-text">
|
||||
<view class="l-text-t">
|
||||
@ -33,7 +33,7 @@
|
||||
</view>
|
||||
<view class="l r" @click="sheep.$router.go('/pages/commission/team')">
|
||||
<view class="l-img">
|
||||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/e940fb45cc53df01980b7069432d5101e104014fbb3cd24862d08c1ffba9df68.png" class="img"></image>
|
||||
<image src="https://zysc.fjptzykj.com:3000/shangcheng/6575e409f7656efb2821b2159ca0a26916f83f037fc533f9f19aa141c412ee2c.png" class="img"></image>
|
||||
</view>
|
||||
<view class="l-text">
|
||||
<view class="l-text-t">
|
||||
@ -95,7 +95,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.l {
|
||||
background: rgba(254,244,237,1);
|
||||
background: rgba(254,244,237);
|
||||
// background:url('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/8e878e15d22f68e0187a953aeba31b80423b7e3fafa8e4aa9f237477ac0fd519.png') rgba(254,244,237,1);
|
||||
width:43%;
|
||||
height:85px;
|
||||
@ -145,8 +145,9 @@
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
// margin: -88rpx 20rpx 0 20rpx;
|
||||
// background: url('https://zysc.fjptzykj.com:3000/shangcheng/10c7d7a9afb36266f658e5f398922b835530cb350ef98cf90d4ef6f60ccc1bc1.png') no-repeat;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/4bcaa2803c9cc953353d22db804b952b333e97d2a0d57266a00baf0c07379efa.png') no-repeat;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/c4f941683d41701ac7f182824791ff43b5f7e70fb527b4d4d153416d6065c44f.png') no-repeat;
|
||||
// background: url('https://zysc.fjptzykj.com:3000/shangcheng/4bcaa2803c9cc953353d22db804b952b333e97d2a0d57266a00baf0c07379efa.png') no-repeat;
|
||||
// background:#ff3000;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -168,7 +168,6 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.PromoterRank .redBg {
|
||||
padding: 45rpx 0 30rpx 0;
|
||||
}
|
||||
|
||||
.PromoterRank .header {
|
||||
@ -177,6 +176,7 @@
|
||||
width: 100%;
|
||||
height: 460rpx;
|
||||
background-size: 100% 100%;
|
||||
padding-top:27px;
|
||||
}
|
||||
|
||||
.PromoterRank .header .nav {
|
||||
@ -187,6 +187,7 @@
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.PromoterRank .header .nav .item {
|
||||
|
||||
@ -1,165 +1,127 @@
|
||||
<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
|
||||
<template>
|
||||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
|
||||
<view class="promoter-list">
|
||||
<view
|
||||
class="promoterHeader bg-color"
|
||||
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
|
||||
>
|
||||
<view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
|
||||
<view>
|
||||
<view class="name" style="color: #fff">推广人数</view>
|
||||
<view>
|
||||
<text class="num" style="color: #fff">
|
||||
{{
|
||||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner" navbarbackgroundColor="rgba(255,48,0)">
|
||||
<view class="promoter-list">
|
||||
<view class="promoterHeader bg-color"
|
||||
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff">
|
||||
<view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
|
||||
<view>
|
||||
<view class="name" style="color: #fff">推广人数</view>
|
||||
<view>
|
||||
<text class="num" style="color: #fff">
|
||||
{{
|
||||
state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
|
||||
0
|
||||
}}
|
||||
</text>
|
||||
人
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-tuandui" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 30rpx">
|
||||
<view class="nav acea-row row-around l1">
|
||||
<view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
|
||||
一级({{ state.summary.firstBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
<view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
|
||||
二级({{ state.summary.secondBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="search acea-row row-between-wrapper"
|
||||
style="display: flex; height: 100rpx; align-items: center"
|
||||
>
|
||||
<view class="input">
|
||||
<input
|
||||
placeholder="点击搜索会员名称"
|
||||
v-model="state.nickname"
|
||||
confirm-type="search"
|
||||
name="search"
|
||||
@confirm="submitForm"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
src="/static/images/search.png"
|
||||
mode=""
|
||||
style="width: 60rpx; height: 64rpx"
|
||||
@click="submitForm"
|
||||
/>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('userCount', 'asc')"
|
||||
v-if="sort === 'userCountDESC'"
|
||||
>
|
||||
团队排序
|
||||
<!-- TODO 芋艿：看看怎么从项目里拿出去 -->
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('userCount', 'desc')"
|
||||
v-else-if="sort === 'userCountASC'"
|
||||
>
|
||||
团队排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
|
||||
团队排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
|
||||
金额排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('price', 'desc')"
|
||||
v-else-if="sort === 'priceASC'"
|
||||
>
|
||||
金额排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'desc')" v-else>
|
||||
金额排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('orderCount', 'asc')"
|
||||
v-if="sort === 'orderCountDESC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('orderCount', 'desc')"
|
||||
v-else-if="sort === 'orderCountASC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
|
||||
订单排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in state.pagination.list" :key="index">
|
||||
<view class="item acea-row row-between-wrapper" style="display: flex">
|
||||
<view
|
||||
class="picTxt acea-row row-between-wrapper"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" />
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view>
|
||||
加入时间:
|
||||
{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="right"
|
||||
style="
|
||||
</text>
|
||||
人
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-tuandui" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="background:#f6f6f6;">
|
||||
<view class="nav acea-row row-around l1">
|
||||
<view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
|
||||
一级({{ state.summary.firstBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
<view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
|
||||
二级({{ state.summary.secondBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
</view>
|
||||
<view class="search acea-row row-between-wrapper"
|
||||
style="display: flex; height: 100rpx; align-items: center">
|
||||
<view class="input">
|
||||
<input placeholder="点击搜索会员名称" v-model="state.nickname" confirm-type="search" name="search"
|
||||
@confirm="submitForm" />
|
||||
</view>
|
||||
<image src="/static/images/search.png" mode="" style="width: 60rpx; height: 64rpx"
|
||||
@click="submitForm" />
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
|
||||
<view class="sortItem" @click="setSort('userCount', 'asc')" v-if="sort === 'userCountDESC'">
|
||||
团队排序
|
||||
<!-- TODO 芋艿：看看怎么从项目里拿出去 -->
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('userCount', 'desc')"
|
||||
v-else-if="sort === 'userCountASC'">
|
||||
团队排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
|
||||
团队排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
|
||||
金额排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'desc')" v-else-if="sort === 'priceASC'">
|
||||
金额排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'desc')" v-else>
|
||||
金额排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'asc')" v-if="sort === 'orderCountDESC'">
|
||||
订单排序
|
||||
<image src="/static/images/sort1.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'desc')"
|
||||
v-else-if="sort === 'orderCountASC'">
|
||||
订单排序
|
||||
<image src="/static/images/sort3.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
|
||||
订单排序
|
||||
<image src="/static/images/sort2.png" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in state.pagination.list" :key="index">
|
||||
<view class="item acea-row row-between-wrapper" style="display: flex">
|
||||
<view class="picTxt acea-row row-between-wrapper"
|
||||
style="display: flex; align-items: center">
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" />
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view>
|
||||
加入时间:
|
||||
{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" style="
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
"
|
||||
>
|
||||
<view>
|
||||
<text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
|
||||
</view>
|
||||
<view>
|
||||
<text class="num">{{ item.orderCount || 0 }}</text
|
||||
>单</view
|
||||
>
|
||||
<view>
|
||||
<text class="num">{{ item.brokeragePrice || 0 }}</text
|
||||
>元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="state.pagination.list.length === 0">
|
||||
<view style="text-align: center">暂无推广人数</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <home></home> -->
|
||||
">
|
||||
<view>
|
||||
<text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
|
||||
</view>
|
||||
<view>
|
||||
<text class="num">{{ item.orderCount || 0 }}</text>单
|
||||
</view>
|
||||
<view>
|
||||
<text class="num">{{ item.brokeragePrice || 0 }}</text>元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="state.pagination.list.length === 0">
|
||||
<view style="text-align: center;margin-top:20px;">暂无推广人数</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <home></home> -->
|
||||
|
||||
<!-- <view class="header-box" :style="[
|
||||
<!-- <view class="header-box" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
@ -228,354 +190,372 @@
|
||||
</view>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
|
||||
</s-empty> -->
|
||||
</s-layout>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
// const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
// const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
|
||||
onPageScroll((e) => {
|
||||
state.scrollTop = e.scrollTop <= 100;
|
||||
});
|
||||
onPageScroll((e) => {
|
||||
state.scrollTop = e.scrollTop <= 100;
|
||||
});
|
||||
|
||||
let sort = ref();
|
||||
const state = reactive({
|
||||
summary: {},
|
||||
pagination: {
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
list: [],
|
||||
total: 0,
|
||||
},
|
||||
loadStatus: '',
|
||||
// ↓ 新 ui 逻辑
|
||||
level: 1,
|
||||
nickname: ref(''),
|
||||
sortKey: '',
|
||||
isAsc: '',
|
||||
});
|
||||
let sort = ref();
|
||||
const state = reactive({
|
||||
summary: {},
|
||||
pagination: {
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
list: [],
|
||||
total: 0,
|
||||
},
|
||||
loadStatus: '',
|
||||
// ↓ 新 ui 逻辑
|
||||
level: 1,
|
||||
nickname: ref(''),
|
||||
sortKey: '',
|
||||
isAsc: '',
|
||||
});
|
||||
|
||||
function filterUserNum(num) {
|
||||
if (_.isNil(num)) {
|
||||
return '';
|
||||
}
|
||||
return `下级团队${num}人`;
|
||||
}
|
||||
function filterUserNum(num) {
|
||||
if (_.isNil(num)) {
|
||||
return '';
|
||||
}
|
||||
return `下级团队${num}人`;
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
state.pagination.list = [];
|
||||
getTeamList();
|
||||
}
|
||||
function submitForm() {
|
||||
state.pagination.list = [];
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
async function getTeamList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
level: state.level,
|
||||
'sortingField.order': state.isAsc,
|
||||
'sortingField.field': state.sortKey,
|
||||
nickname: state.nickname,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
async function getTeamList() {
|
||||
state.loadStatus = 'loading';
|
||||
let {
|
||||
code,
|
||||
data
|
||||
} = await BrokerageApi.getBrokerageUserChildSummaryPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
level: state.level,
|
||||
'sortingField.order': state.isAsc,
|
||||
'sortingField.field': state.sortKey,
|
||||
nickname: state.nickname,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
function setType(e) {
|
||||
state.pagination.list = [];
|
||||
state.level = e + '';
|
||||
getTeamList();
|
||||
}
|
||||
function setType(e) {
|
||||
state.pagination.list = [];
|
||||
state.level = e + '';
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
function setSort(sortKey, isAsc) {
|
||||
state.pagination.list = [];
|
||||
sort = sortKey + isAsc.toUpperCase();
|
||||
state.isAsc = isAsc;
|
||||
state.sortKey = sortKey;
|
||||
getTeamList();
|
||||
}
|
||||
function setSort(sortKey, isAsc) {
|
||||
state.pagination.list = [];
|
||||
sort = sortKey + isAsc.toUpperCase();
|
||||
state.isAsc = isAsc;
|
||||
state.sortKey = sortKey;
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
await getTeamList();
|
||||
// 概要数据
|
||||
let { data } = await BrokerageApi.getBrokerageUserSummary();
|
||||
state.summary = data;
|
||||
});
|
||||
onLoad(async () => {
|
||||
await getTeamList();
|
||||
// 概要数据
|
||||
let {
|
||||
data
|
||||
} = await BrokerageApi.getBrokerageUserSummary();
|
||||
state.summary = data;
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getTeamList();
|
||||
}
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.l1 {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.l1 {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/c9aeef7e970b76991668740263d518f25ce737b1552db9ee7b22d8572a4a5110.png') no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/c9aeef7e970b76991668740263d518f25ce737b1552db9ee7b22d8572a4a5110.png') no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
.list-box {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-custom-right {
|
||||
.time-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.chat-custom-right {
|
||||
.time-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 21rpx;
|
||||
line-height: 30rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
width: 140rpx;
|
||||
.tag-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 21rpx;
|
||||
line-height: 30rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
width: 140rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 6rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tag-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 6rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag-title {
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐人
|
||||
.referrer-box {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 20rpx;
|
||||
// 推荐人
|
||||
.referrer-box {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 20rpx;
|
||||
|
||||
.referrer-avatar {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.referrer-avatar {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.promoter-list{
|
||||
background:rgba(255,48,0);
|
||||
margin-top:-3rem;
|
||||
padding-top:30px;
|
||||
}
|
||||
.promoter-list .nav {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
margin-top: -30rpx;
|
||||
}
|
||||
|
||||
.promoter-list .nav {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
margin-top: -30rpx;
|
||||
}
|
||||
.promoter-list .nav .item.on {
|
||||
border-bottom: 5rpx solid;
|
||||
// $theme-color
|
||||
color: red;
|
||||
// $theme-color
|
||||
}
|
||||
|
||||
.promoter-list .nav .item.on {
|
||||
border-bottom: 5rpx solid;
|
||||
// $theme-color
|
||||
color: red;
|
||||
// $theme-color
|
||||
}
|
||||
.promoter-list .search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 100rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 14rpx;
|
||||
border-bottom-right-radius: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 100rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 14rpx;
|
||||
border-bottom-right-radius: 14rpx;
|
||||
}
|
||||
.promoter-list .search .input {
|
||||
width: 592rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.promoter-list .search .input {
|
||||
width: 592rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.promoter-list .search .input input {
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
width: 610rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promoter-list .search .input input {
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
width: 610rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.promoter-list .search .input .placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.promoter-list .search .input .placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
.promoter-list .search .input .iconfont {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.promoter-list .search .input .iconfont {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.promoter-list .search .iconfont {
|
||||
font-size: 32rpx;
|
||||
color: #515151;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.promoter-list .search .iconfont {
|
||||
font-size: 32rpx;
|
||||
color: #515151;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
.promoter-list .list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.promoter-list .list .sortNav {
|
||||
background-color: #fff;
|
||||
height: 76rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav {
|
||||
background-color: #fff;
|
||||
height: 76rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
}
|
||||
.promoter-list .list .sortNav .sortItem {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav .sortItem {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.promoter-list .list .sortNav .sortItem image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
vertical-align: -3rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav .sortItem image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
vertical-align: -3rpx;
|
||||
}
|
||||
.promoter-list .list .item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
height: 152rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.promoter-list .list .item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
height: 152rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.promoter-list .list .item .picTxt .pictrue {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .pictrue {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.promoter-list .list .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #fff;
|
||||
box-shadow: 0 0 10rpx #aaa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #fff;
|
||||
box-shadow: 0 0 10rpx #aaa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.promoter-list .list .item .picTxt .text {
|
||||
// width: 304rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .text {
|
||||
// width: 304rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
.promoter-list .list .item .picTxt .text .name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 13rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .text .name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 13rpx;
|
||||
}
|
||||
.promoter-list .list .item .right {
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .right {
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .right .num {
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
</style>
|
||||
.promoter-list .list .item .right .num {
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
</style>
|
||||
@ -17,9 +17,10 @@
|
||||
<!-- 情况一：领劵中心 -->
|
||||
<template v-if="state.currentTab === 0">
|
||||
<view v-for="item in state.pagination.list" :key="item.id">
|
||||
<!-- @tap="sheep.$router.go('/pages/coupon/detail', { id: item.id })" -->
|
||||
<s-coupon-list
|
||||
:data="item"
|
||||
@tap="sheep.$router.go('/pages/coupon/detail', { id: item.id })"
|
||||
|
||||
>
|
||||
<template #default>
|
||||
<button
|
||||
@ -37,17 +38,17 @@
|
||||
<!-- 情况二：我的优惠劵 -->
|
||||
<template v-else>
|
||||
<view v-for="item in state.pagination.list" :key="item.id">
|
||||
<!-- @tap="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })" -->
|
||||
<s-coupon-list
|
||||
:data="item"
|
||||
type="user"
|
||||
@tap="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
|
||||
>
|
||||
<template #default>
|
||||
<button
|
||||
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
|
||||
:class="item.status !== 1 ? 'disabled-btn' : ''"
|
||||
:disabled="item.status !== 1"
|
||||
@click.stop="sheep.$router.go('/pages/coupon/detail', { couponId: item.id })"
|
||||
@click.stop="sheep.$router.go('/pages/goods/list')"
|
||||
>
|
||||
{{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
|
||||
</button>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
:src="sheep.$url.static('https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png')"
|
||||
class="point-img"
|
||||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
@ -166,6 +166,7 @@
|
||||
count: sku.count,
|
||||
},
|
||||
],
|
||||
point: true,
|
||||
}),
|
||||
});
|
||||
}
|
||||
@ -291,6 +292,7 @@
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
|
||||
@ -605,9 +605,10 @@
|
||||
|
||||
// height: 41px;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 10px;
|
||||
|
||||
.title-text {
|
||||
padding: 14px 13px;
|
||||
padding: 0 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
onShareAppMessage
|
||||
@search="(e) => { console.log(e,'eeeeeeeeeeee') }"
|
||||
headerBtns='headerBtns'
|
||||
navbarbackgroundColor="rgba(248,83,42)"
|
||||
backgroundColor="rgba(248,83,42)"
|
||||
opacityBgUi='ll'
|
||||
:navBg="true"
|
||||
>
|
||||
|
||||
@ -1,527 +1,486 @@
|
||||
<template>
|
||||
<s-layout title="确认订单">
|
||||
<!-- 头部地址选择【配送地址】【自提地址】 -->
|
||||
<AddressSelection v-model="addressState" />
|
||||
<s-layout title="确认订单">
|
||||
<!-- 头部地址选择【配送地址】【自提地址】 -->
|
||||
<AddressSelection v-model="addressState" />
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="order-card-box ss-m-b-14">
|
||||
<s-goods-item
|
||||
v-for="item in state.orderInfo.items"
|
||||
:key="item.skuId"
|
||||
:img="item.picUrl"
|
||||
:title="item.spuName"
|
||||
:skuText="item.properties.map((property) => property.valueName).join(' ')"
|
||||
:price="item.price"
|
||||
:num="item.count"
|
||||
marginBottom="10"
|
||||
/>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
|
||||
<view class="item-title">订单备注</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="建议留言前先与商家沟通"
|
||||
v-model="state.orderPayload.remark"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="order-card-box ss-m-b-14">
|
||||
<s-goods-item v-for="item in state.orderInfo.items" :key="item.skuId" :img="item.picUrl"
|
||||
:title="item.spuName" :skuText="item.properties.map((property) => property.valueName).join(' ')"
|
||||
:price="item.price" :num="item.count" marginBottom="10" />
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
|
||||
<view class="item-title">订单备注</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
|
||||
:inputBorder="false" :clearable="false" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格信息 -->
|
||||
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
|
||||
<view class="total-box-content border-bottom">
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">商品金额</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24">
|
||||
￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="state.orderPayload.pointActivityId"
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
>
|
||||
<view class="item-title">兑换积分</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
|
||||
class="score-img"
|
||||
/>
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{ state.orderInfo.usePoint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
|
||||
>
|
||||
<view class="item-title">积分抵扣</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
|
||||
class="score-img"
|
||||
/>
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{
|
||||
<!-- 价格信息 -->
|
||||
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
|
||||
<view class="total-box-content border-bottom">
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">商品金额</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24">
|
||||
￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="state.orderPayload.pointActivityId" class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<view class="item-title">兑换积分</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
|
||||
class="score-img" />
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{ state.orderInfo.usePoint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId">
|
||||
<view class="item-title">积分抵扣</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
|
||||
class="score-img" />
|
||||
<text class="item-value ss-m-r-24">
|
||||
{{
|
||||
state.pointStatus || state.orderPayload.pointActivityId
|
||||
? state.orderInfo.totalPoint - state.orderInfo.usePoint
|
||||
: state.orderInfo.totalPoint || 0
|
||||
}}
|
||||
</text>
|
||||
<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
|
||||
<checkbox
|
||||
:checked="state.pointStatus"
|
||||
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
|
||||
/>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 快递配置时，信息的展示 -->
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 1"
|
||||
>
|
||||
<view class="item-title">运费</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
|
||||
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
|
||||
</text>
|
||||
<view class="item-value ss-m-r-24" v-else>免运费</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 门店自提时，需要填写姓名和手机号 -->
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 2"
|
||||
>
|
||||
<view class="item-title">联系人</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="请填写您的联系姓名"
|
||||
v-model="addressState.receiverName"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="addressState.deliveryType === 2"
|
||||
>
|
||||
<view class="item-title">联系电话</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput
|
||||
maxlength="20"
|
||||
placeholder="请填写您的联系电话"
|
||||
v-model="addressState.receiverMobile"
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.type === 0"
|
||||
>
|
||||
<view class="item-title">优惠券</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
|
||||
<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
|
||||
</text>
|
||||
<text
|
||||
class="item-value"
|
||||
:class="
|
||||
</text>
|
||||
<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
|
||||
<checkbox :checked="state.pointStatus"
|
||||
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0" />
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 快递配置时，信息的展示 -->
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 1">
|
||||
<view class="item-title">运费</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value ss-m-r-24" v-if="state.orderInfo.price.deliveryPrice > 0">
|
||||
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
|
||||
</text>
|
||||
<view class="item-value ss-m-r-24" v-else>免运费</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 门店自提时，需要填写姓名和手机号 -->
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 2">
|
||||
<view class="item-title">联系人</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput maxlength="20" placeholder="请填写您的联系姓名" v-model="addressState.receiverName"
|
||||
:inputBorder="false" :clearable="false" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="addressState.deliveryType === 2">
|
||||
<view class="item-title">联系电话</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<uni-easyinput maxlength="20" placeholder="请填写您的联系电话" v-model="addressState.receiverMobile"
|
||||
:inputBorder="false" :clearable="false" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.type === 0">
|
||||
<view class="item-title">优惠券</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
|
||||
<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
|
||||
</text>
|
||||
<text class="item-value" :class="
|
||||
state.couponInfo.filter((coupon) => coupon.match).length > 0
|
||||
? 'text-red'
|
||||
: 'text-disabled'
|
||||
"
|
||||
v-else
|
||||
>
|
||||
{{
|
||||
" v-else>
|
||||
{{
|
||||
state.couponInfo.filter((coupon) => coupon.match).length > 0
|
||||
? state.couponInfo.filter((coupon) => coupon.match).length + ' 张可用'
|
||||
: '暂无可用优惠券'
|
||||
}}
|
||||
</text>
|
||||
<text class="_icon-forward item-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.price.discountPrice > 0"
|
||||
>
|
||||
<view class="item-title">活动优惠</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
|
||||
<text class="item-value text-red">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
|
||||
</text>
|
||||
<text class="_icon-forward item-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.price.vipPrice > 0"
|
||||
>
|
||||
<view class="item-title">会员优惠</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value text-red">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
|
||||
<view class="total-num ss-m-r-20">
|
||||
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
|
||||
</view>
|
||||
<view>合计：</view>
|
||||
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</text>
|
||||
<text class="_icon-forward item-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between"
|
||||
v-if="state.orderInfo.price.discountPrice > 0">
|
||||
<view class="item-title">活动优惠</view>
|
||||
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
|
||||
<text class="item-value text-red">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
|
||||
</text>
|
||||
<text class="_icon-forward item-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between" v-if="state.orderInfo.price.vipPrice > 0">
|
||||
<view class="item-title">会员优惠</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value text-red">
|
||||
-￥{{ fen2yuan(state.orderInfo.price.vipPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
|
||||
<view class="total-num ss-m-r-20">
|
||||
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
|
||||
</view>
|
||||
<view>合计：</view>
|
||||
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择优惠券弹框 -->
|
||||
<s-coupon-select
|
||||
v-model="state.couponInfo"
|
||||
:show="state.showCoupon"
|
||||
@confirm="onSelectCoupon"
|
||||
@close="state.showCoupon = false"
|
||||
/>
|
||||
<!-- 选择优惠券弹框 -->
|
||||
<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
|
||||
@close="state.showCoupon = false" />
|
||||
|
||||
<!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 -->
|
||||
<s-discount-list
|
||||
v-model="state.orderInfo"
|
||||
:show="state.showDiscount"
|
||||
@close="state.showDiscount = false"
|
||||
/>
|
||||
<!-- 满额折扣弹框 TODO @puhui999：【折扣】后续要把优惠信息打进去 -->
|
||||
<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
|
||||
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
|
||||
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
|
||||
<view class="total-box-footer ss-flex ss-col-center">
|
||||
<view class="total-num ss-font-30 text-red">
|
||||
￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
提交订单
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
|
||||
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
|
||||
<view class="total-box-footer ss-flex ss-col-center">
|
||||
<view class="total-num ss-font-30 text-red">
|
||||
￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm">
|
||||
提交订单
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import AddressSelection from '@/pages/order/addressSelection.vue';
|
||||
import sheep from '@/sheep';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import AddressSelection from '@/pages/order/addressSelection.vue';
|
||||
import sheep from '@/sheep';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import {
|
||||
fen2yuan
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
|
||||
const state = reactive({
|
||||
orderPayload: {},
|
||||
orderInfo: {
|
||||
items: [], // 商品项列表
|
||||
price: {}, // 价格信息
|
||||
},
|
||||
showCoupon: false, // 是否展示优惠劵
|
||||
couponInfo: [], // 优惠劵列表
|
||||
showDiscount: false, // 是否展示营销活动
|
||||
// ========== 积分 ==========
|
||||
pointStatus: false, //是否使用积分
|
||||
});
|
||||
const state = reactive({
|
||||
orderPayload: {},
|
||||
orderInfo: {
|
||||
items: [], // 商品项列表
|
||||
price: {}, // 价格信息
|
||||
},
|
||||
showCoupon: false, // 是否展示优惠劵
|
||||
couponInfo: [], // 优惠劵列表
|
||||
showDiscount: false, // 是否展示营销活动
|
||||
// ========== 积分 ==========
|
||||
pointStatus: false, //是否使用积分
|
||||
});
|
||||
|
||||
const addressState = ref({
|
||||
addressInfo: {}, // 选择的收货地址
|
||||
deliveryType: 1, // 收货方式：1-快递配送，2-门店自提
|
||||
isPickUp: true, // 门店自提是否开启
|
||||
pickUpInfo: {}, // 选择的自提门店信息
|
||||
receiverName: '', // 收件人名称
|
||||
receiverMobile: '', // 收件人手机
|
||||
});
|
||||
const addressState = ref({
|
||||
addressInfo: {}, // 选择的收货地址
|
||||
deliveryType: 1, // 收货方式：1-快递配送，2-门店自提
|
||||
isPickUp: true, // 门店自提是否开启
|
||||
pickUpInfo: {}, // 选择的自提门店信息
|
||||
receiverName: '', // 收件人名称
|
||||
receiverMobile: '', // 收件人手机
|
||||
});
|
||||
|
||||
// ========== 积分 ==========
|
||||
/**
|
||||
* 使用积分抵扣
|
||||
*/
|
||||
const changeIntegral = async () => {
|
||||
state.pointStatus = !state.pointStatus;
|
||||
await getOrderInfo();
|
||||
};
|
||||
// ========== 积分 ==========
|
||||
/**
|
||||
* 使用积分抵扣
|
||||
*/
|
||||
const changeIntegral = async () => {
|
||||
state.pointStatus = !state.pointStatus;
|
||||
await getOrderInfo();
|
||||
};
|
||||
|
||||
// 选择优惠券
|
||||
async function onSelectCoupon(couponId) {
|
||||
state.orderPayload.couponId = couponId;
|
||||
await getOrderInfo();
|
||||
state.showCoupon = false;
|
||||
}
|
||||
// 选择优惠券
|
||||
async function onSelectCoupon(couponId) {
|
||||
state.orderPayload.couponId = couponId;
|
||||
await getOrderInfo();
|
||||
state.showCoupon = false;
|
||||
}
|
||||
|
||||
// 提交订单
|
||||
function onConfirm() {
|
||||
if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
|
||||
sheep.$helper.toast('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
if (addressState.value.deliveryType === 2) {
|
||||
if (!addressState.value.pickUpInfo.id) {
|
||||
sheep.$helper.toast('请选择自提门店地址');
|
||||
return;
|
||||
}
|
||||
if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
|
||||
sheep.$helper.toast('请填写联系人或联系人电话');
|
||||
return;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
|
||||
sheep.$helper.toast('请填写您的真实姓名');
|
||||
return;
|
||||
}
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
|
||||
sheep.$helper.toast('请填写正确的手机号');
|
||||
return;
|
||||
}
|
||||
}
|
||||
submitOrder();
|
||||
}
|
||||
|
||||
// 创建订单&跳转
|
||||
async function submitOrder() {
|
||||
const { code, data } = await OrderApi.createOrder({
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
remark: state.orderPayload.remark,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 更新购物车列表，如果来自购物车
|
||||
if (state.orderPayload.items[0].cartId > 0) {
|
||||
sheep.$store('cart').getList();
|
||||
}
|
||||
|
||||
// 跳转到支付页面
|
||||
if (data.payOrderId && data.payOrderId > 0) {
|
||||
sheep.$router.redirect('/pages/pay/index', {
|
||||
id: data.payOrderId,
|
||||
});
|
||||
} else {
|
||||
sheep.$router.redirect('/pages/order/detail', {
|
||||
id: data.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 检查库存 & 计算订单价格
|
||||
async function getOrderInfo() {
|
||||
// 计算价格
|
||||
let parm = {};
|
||||
if(addressState.value.deliveryType == 4){
|
||||
parm = {
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
// 提交订单
|
||||
function onConfirm() {
|
||||
if (addressState.value.deliveryType === 1 && !addressState.value.addressInfo.id) {
|
||||
sheep.$helper.toast('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
parm = {
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
if (addressState.value.deliveryType === 2) {
|
||||
if (!addressState.value.pickUpInfo.id) {
|
||||
sheep.$helper.toast('请选择自提门店地址');
|
||||
return;
|
||||
}
|
||||
if (addressState.value.receiverName === '' || addressState.value.receiverMobile === '') {
|
||||
sheep.$helper.toast('请填写联系人或联系人电话');
|
||||
return;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(addressState.value.receiverName)) {
|
||||
sheep.$helper.toast('请填写您的真实姓名');
|
||||
return;
|
||||
}
|
||||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(addressState.value.receiverMobile)) {
|
||||
sheep.$helper.toast('请填写正确的手机号');
|
||||
return;
|
||||
}
|
||||
}
|
||||
submitOrder();
|
||||
}
|
||||
|
||||
// 创建订单&跳转
|
||||
async function submitOrder() {
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = await OrderApi.createOrder({
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
remark: state.orderPayload.remark,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 更新购物车列表，如果来自购物车
|
||||
if (state.orderPayload.items[0].cartId > 0) {
|
||||
sheep.$store('cart').getList();
|
||||
}
|
||||
|
||||
// 跳转到支付页面
|
||||
if (data.payOrderId && data.payOrderId > 0) {
|
||||
sheep.$router.redirect('/pages/pay/index', {
|
||||
id: data.payOrderId,
|
||||
});
|
||||
} else if(!state.orderPayload.point) {
|
||||
sheep.$router.redirect('/pages/order/detail', {
|
||||
id: data.id,
|
||||
});
|
||||
}else{
|
||||
sheep.$router.redirect('/pages/activity/point/exchange_detail', {
|
||||
id: data.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const { data, code } = await OrderApi.settlementOrder(parm);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
state.couponInfo = data.coupons || [];
|
||||
// 设置收货地址
|
||||
if (state.orderInfo.address) {
|
||||
addressState.value.addressInfo = state.orderInfo.address;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (!options.data) {
|
||||
sheep.$helper.toast('参数不正确，请检查！');
|
||||
return;
|
||||
}
|
||||
state.orderPayload = JSON.parse(options.data);
|
||||
await getOrderInfo();
|
||||
// 获取交易配置
|
||||
const { data, code } = await TradeConfigApi.getTradeConfig();
|
||||
if (code === 0) {
|
||||
addressState.value.isPickUp = data.deliveryPickUpEnabled;
|
||||
}
|
||||
});
|
||||
// 检查库存 & 计算订单价格
|
||||
async function getOrderInfo() {
|
||||
// 计算价格
|
||||
let parm = {};
|
||||
console.log(state.orderPayload.pointActivityId, 'state.orderPayload.pointActivityId')
|
||||
if (state.orderPayload.pointActivityId) {
|
||||
parm = {
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
pointActivityId: state.orderPayload.pointActivityId,
|
||||
}
|
||||
} else {
|
||||
parm = {
|
||||
items: state.orderPayload.items,
|
||||
couponId: state.orderPayload.couponId,
|
||||
deliveryType: addressState.value.deliveryType,
|
||||
addressId: addressState.value.addressInfo.id, // 收件地址编号
|
||||
pickUpStoreId: addressState.value.pickUpInfo.id, //自提门店编号
|
||||
receiverName: addressState.value.receiverName, // 选择门店自提时，该字段为联系人名
|
||||
receiverMobile: addressState.value.receiverMobile, // 选择门店自提时，该字段为联系人手机
|
||||
pointStatus: state.pointStatus,
|
||||
combinationActivityId: state.orderPayload.combinationActivityId,
|
||||
combinationHeadId: state.orderPayload.combinationHeadId,
|
||||
seckillActivityId: state.orderPayload.seckillActivityId,
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 watch 监听地址和配送方式的变化
|
||||
watch(addressState, async (newAddress, oldAddress) => {
|
||||
// 如果收货地址或配送方式有变化，则重新计算价格
|
||||
if (
|
||||
newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
|
||||
newAddress.deliveryType !== oldAddress.deliveryType
|
||||
) {
|
||||
await getOrderInfo();
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = await OrderApi.settlementOrder(parm);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
state.couponInfo = data.coupons || [];
|
||||
// 设置收货地址
|
||||
if (state.orderInfo.address) {
|
||||
addressState.value.addressInfo = state.orderInfo.address;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (!options.data) {
|
||||
sheep.$helper.toast('参数不正确，请检查！');
|
||||
return;
|
||||
}
|
||||
state.orderPayload = JSON.parse(options.data);
|
||||
await getOrderInfo();
|
||||
// 获取交易配置
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = await TradeConfigApi.getTradeConfig();
|
||||
if (code === 0) {
|
||||
addressState.value.isPickUp = data.deliveryPickUpEnabled;
|
||||
}
|
||||
});
|
||||
|
||||
// 使用 watch 监听地址和配送方式的变化
|
||||
watch(addressState, async (newAddress, oldAddress) => {
|
||||
// 如果收货地址或配送方式有变化，则重新计算价格
|
||||
if (
|
||||
newAddress.addressInfo.id !== oldAddress.addressInfo.id ||
|
||||
newAddress.deliveryType !== oldAddress.deliveryType
|
||||
) {
|
||||
await getOrderInfo();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-wrapper {
|
||||
width: 320rpx;
|
||||
}
|
||||
:deep() {
|
||||
.uni-input-wrapper {
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
text-align: right !important;
|
||||
padding-right: 0 !important;
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
text-align: right !important;
|
||||
padding-right: 0 !important;
|
||||
|
||||
.uni-input-input {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
.uni-input-input {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: right !important;
|
||||
}
|
||||
}
|
||||
.uni-easyinput__content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
height: 80rpx;
|
||||
.order-item {
|
||||
height: 80rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.text-disabled {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
.text-disabled {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
color: $dark-9;
|
||||
}
|
||||
.item-icon {
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.remark-input {
|
||||
text-align: right;
|
||||
}
|
||||
.remark-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-placeholder {
|
||||
color: $dark-9;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.item-placeholder {
|
||||
color: $dark-9;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.total-box-footer {
|
||||
height: 90rpx;
|
||||
.total-box-footer {
|
||||
height: 90rpx;
|
||||
|
||||
.total-num {
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
.total-num {
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
|
||||
.submit-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
.submit-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.goto-pay-text {
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
.goto-pay-text {
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #e5e5e5;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #e5e5e5;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.cicon-checkbox {
|
||||
font-size: 36rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
.cicon-checkbox {
|
||||
font-size: 36rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.cicon-box {
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
.cicon-box {
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@ -5,28 +5,29 @@
|
||||
<view class="card" v-for="(item, index) in reservationList" :key="index">
|
||||
<view class="card-content">
|
||||
<text class="type">预约信息</text>
|
||||
<text class="time">订单日期：{{ sheep.$helper.timeFormat(item.reAddTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
|
||||
<text class="time">订单日期：{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd') }}</text>
|
||||
</view>
|
||||
<view style="height: 1px; background-color: #e8e8e8;margin:7px 0px 7px 0px"></view>
|
||||
<view>
|
||||
<text class="address">医生：{{ item.technicianName }}</text><br><br>
|
||||
<text class="address">医馆：{{ item.brandName }}</text><br><br>
|
||||
<text class="address">医馆电话：{{ item.brandphone }}</text><br><br>
|
||||
<text class="address">预约姓名：<text class="title">{{ item.technicianName }}</text></text>
|
||||
<text class="address">预约电话：<text class="title">{{ item.memberphone }}</text></text>
|
||||
<text class="address">预约时间：<text
|
||||
class="title">{{ sheep.$helper.timeFormat(item.reAddTime, 'yyyy-mm-dd') }}</text></text>
|
||||
<text class="address">门店名称：<text class="title">{{ item.brandName }}</text> </text>
|
||||
<div class="address-container">
|
||||
<text class="address">医馆地址：{{ item.brandaddress }}</text><br><br>
|
||||
<text class="address">门店地址：<text class="title">{{ item.brandaddress }}</text></text>
|
||||
</div>
|
||||
<text class="address">备注：{{ item.remark }}</text><br><br>
|
||||
<text class="address">备注留言：<text class="title">{{ item.remark }}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="status"
|
||||
style="float: right; border-radius: 10px; background-color: orangered; padding: 5px 10px; color: white;"
|
||||
style="float: right; border-radius: 10px; background-color: rgba(0,149,243); padding: 5px 10px; color: white;"
|
||||
v-if=" item.reStatus===0">待审核</text>
|
||||
<text class="status"
|
||||
style="float: right; border-radius: 10px; background-color: orangered; padding: 5px 10px; color: white;"
|
||||
v-if=" item.reStatus===1">预约成功</text>
|
||||
<text class="status"
|
||||
style="float: right; border-radius: 10px; background-color: orangered; padding: 5px 10px; color: white;"
|
||||
v-if=" item.reStatus===2">已完结</text><br><br>
|
||||
v-if=" item.reStatus===2">已完结</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -88,6 +89,7 @@
|
||||
limit,
|
||||
totalPages,
|
||||
getList,
|
||||
sheep
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -142,10 +144,12 @@
|
||||
.card-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.type {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -154,17 +158,18 @@
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/7b5c7b96c46b782e8928ed9e53d19563823408b481b03ec75954d8266ec55f6b.png') no-repeat;
|
||||
background: url('https://zysc.fjptzykj.com:3000/shangcheng/617bb18286a76a4c8bfc377bf69f7436c478252e419f04cdd9a6070dd352d00f.png') no-repeat;
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-contentinfo {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
/* display: flex;
|
||||
justify-content: space-between; */
|
||||
}
|
||||
|
||||
.card-image {
|
||||
@ -192,9 +197,15 @@
|
||||
}
|
||||
|
||||
.address {
|
||||
margin: 20px 0px 0px 20px;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
color: rgba(174, 174, 174);
|
||||
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.health-list {
|
||||
@ -228,7 +239,7 @@
|
||||
|
||||
.time {
|
||||
/* margin-top: 20px; */
|
||||
font-size: 15px;
|
||||
color: #5e5e5e;
|
||||
font-size: 12px;
|
||||
color: #aeaeae;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
378
pages/user/user_vip/list.vue
Normal file
378
pages/user/user_vip/list.vue
Normal file
@ -0,0 +1,378 @@
|
||||
<!-- 会员信息 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" title="SVIP会员专享" :statusBar="true" :bgStyle="{ color: '#FE832A', backgroundColor:'white' }" navbarbackgroundColor="rgba(57,55,54)">
|
||||
<view class='vip-main'>
|
||||
<view class="vip-top">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/07cee74ec47ed41b33e277dffe9291a6cab8423d8f8539c34662a793842e6d27.png"
|
||||
class="img"></image>
|
||||
<view class="userInfo">
|
||||
<view class="l">
|
||||
|
||||
<image :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill" class="img"></image>
|
||||
<view class="text">
|
||||
<view class="t">{{ userInfo.nickname }}
|
||||
<image src="" class="img"></image>
|
||||
</view>
|
||||
<view class="c">您与众悦e家商场的第101天</view>
|
||||
<view class="b">开通即享会员权益</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="r">
|
||||
开通会员
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="vip-zxq">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/d865a7766bf5ccbfb76e97f3fd65bcfdc37a612fe94878b7a899adab869360f8.png"
|
||||
class="img"></image>
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item, index) in vipList2" :key="index">
|
||||
<view class="new-nei">
|
||||
<view class="l">
|
||||
<image
|
||||
:src="item.iconUrl"
|
||||
class="l-img"></image>
|
||||
</view>
|
||||
<view class="r">
|
||||
<view class="t">
|
||||
{{item.benName}}
|
||||
</view>
|
||||
<view class="b">
|
||||
{{item.intro}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="clear: both;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="vip-kt">
|
||||
<view class="top">
|
||||
<text class="t1" v-if="userInfo.activate == 1">试用会员</text>
|
||||
<text class="t1" v-if="userInfo.activate == 2">开通会员</text>
|
||||
<text class="t2">有效期至</text>
|
||||
<text class="t3">2024-10-24</text>
|
||||
</view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" @click="vipFun(index,item.name)" class="scroll-view-item_H uni-bg-red" :class="valVip == index ? 'on' : ''" v-for="(item,index) in vipList" :key="index">
|
||||
<view class="t">{{item.name}}</view>
|
||||
<view class="c">￥<text class="tx">{{item.specialPrice}}</text></view>
|
||||
<view class="b" v-if="index==0">试用1天</view>
|
||||
<view class="b sc" v-else>￥{{item.originalPrice}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="vip-text">
|
||||
购买即视为同意《<text class="ts">会员用户协议</text>》
|
||||
</view>
|
||||
<view class="vip-btn" @click="beclick()" v-if="userInfo.activate != 1">
|
||||
立即试用
|
||||
</view>
|
||||
<view class="vip-btn" @click="beclick()" v-else>
|
||||
立即开通
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import request from '@/sheep/request';
|
||||
import {
|
||||
baseUrl,
|
||||
apiPath
|
||||
} from '@/sheep/config';
|
||||
import sheep from '@/sheep';
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const vipList = ref([]);
|
||||
const vipList2 = ref([]);
|
||||
const valVip = ref([]);
|
||||
const nameVip = ref([]);
|
||||
// 定义方法
|
||||
function getList() {
|
||||
request({
|
||||
url: `${baseUrl}${apiPath}/member/card/type/list`,
|
||||
method: 'GET',
|
||||
params: {
|
||||
},
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log(res,"sss")
|
||||
vipList.value = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
// vipFun
|
||||
let data = {
|
||||
cardName:nameVip.value
|
||||
}
|
||||
function vipFun(index,name) {
|
||||
valVip.value = index
|
||||
data.cardName = name
|
||||
}
|
||||
|
||||
// beclick
|
||||
function beclick() {
|
||||
console.log(data.cardName,"nameVip.value")
|
||||
request({
|
||||
url: `${baseUrl}${apiPath}/pay/member/create`,
|
||||
method: 'post',
|
||||
data,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log(res,"-----------试用---------------")
|
||||
if(res.code == 200){
|
||||
sheep.$helper.toast('试用开通成功');
|
||||
sheep.$router.go('/pages/index/user')
|
||||
}else{
|
||||
sheep.$helper.toast(res.msg);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 定义方法2
|
||||
function getList2() {
|
||||
request({
|
||||
url: `${baseUrl}${apiPath}/member/benefit/list`,
|
||||
method: 'GET',
|
||||
params: {
|
||||
},
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}).then((res) => {
|
||||
console.log(res,"sss")
|
||||
vipList2.value = res.data;
|
||||
});
|
||||
}
|
||||
// 使用 onMounted 生命周期钩子
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getList2();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.vip-main {
|
||||
margin-top: -3.75rem;
|
||||
|
||||
.vip-top {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
// background: rgba(57, 55, 54);
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
position: absolute;
|
||||
bottom: 38px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 85%;
|
||||
align-items: center;
|
||||
|
||||
.l {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 23px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
.t {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
color: rgba(208, 185, 156);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.b {
|
||||
color: rgba(201, 141, 99);
|
||||
font-size: 13px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
color: #8a745c;
|
||||
font-size: 15px;
|
||||
padding: 5px 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip-zxq {
|
||||
.img {
|
||||
width: 77%;
|
||||
height: 89px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 10px;
|
||||
|
||||
.item {
|
||||
width: 47%;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
|
||||
.new-nei {
|
||||
background: rgba(247, 247, 247);
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.l-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
.t {}
|
||||
|
||||
.b {
|
||||
font-size: 13px;
|
||||
color: rgba(191, 147, 109);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vip-kt {
|
||||
padding: 10px 10px;
|
||||
|
||||
.top {
|
||||
.t1 {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
color: rgba(121, 121, 121);
|
||||
}
|
||||
|
||||
.t3 {
|
||||
font-size: 13px;
|
||||
color: rgba(174, 90, 42);
|
||||
}
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
.scroll-view-item_H {
|
||||
width: 113px;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(214,214,214);
|
||||
margin-right:15px;
|
||||
border-radius: 10px;
|
||||
margin-top:15px;
|
||||
padding:15px 0;
|
||||
&.on{
|
||||
background-color: rgba(254,247,236);
|
||||
border: 1px solid rgba(252,194,130);
|
||||
}
|
||||
.t{
|
||||
color:rgba(117,78,25);
|
||||
font-weight: 700;
|
||||
font-size:20px;
|
||||
text-align: center;
|
||||
}
|
||||
.c{
|
||||
color:rgba(117,78,25);
|
||||
font-weight: 700;
|
||||
font-size:15px;
|
||||
text-align: center;
|
||||
padding:10px 0;
|
||||
.tx{
|
||||
font-size:27px;
|
||||
}
|
||||
}
|
||||
.b{
|
||||
color:rgba(173,173,173);
|
||||
font-size:16px;
|
||||
text-align: center;
|
||||
&.sc{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip-text {
|
||||
text-align: center;
|
||||
color: rgba(157, 157, 157);
|
||||
margin: 15px 0;
|
||||
|
||||
.ts {
|
||||
color: rgba(174, 90, 42);
|
||||
}
|
||||
}
|
||||
|
||||
.vip-btn {
|
||||
padding: 10px 0;
|
||||
background: rgba(254, 220, 137);
|
||||
text-align: center;
|
||||
margin: 0 15px;
|
||||
border-radius: 20px;
|
||||
color: rgba(95, 53, 38);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -69,7 +69,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<text class="time">
|
||||
{{ sheep.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,282 +1,441 @@
|
||||
<!-- 我的积分 -->
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
|
||||
<view
|
||||
class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="header-bg">
|
||||
<view class="bg" />
|
||||
</view>
|
||||
<view class="score-box ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="ss-m-b-30">
|
||||
<text class="all-title ss-m-r-8">当前积分</text>
|
||||
</view>
|
||||
<text class="all-num">{{ userInfo.point || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab -->
|
||||
<su-sticky :customNavHeight="sys_navBar">
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker
|
||||
v-model="state.date"
|
||||
type="daterange"
|
||||
@change="onChangeTime"
|
||||
:end="state.today"
|
||||
>
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
|
||||
<view class="header-box ss-flex ss-flex-col ss-row-center ss-col-center" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]">
|
||||
<view class="header-bg">
|
||||
<view class="bg" />
|
||||
</view>
|
||||
<view class="score-box ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="ss-m-b-30">
|
||||
<text class="all-title ss-m-r-8">当前积分</text>
|
||||
</view>
|
||||
<text class="all-num">{{ userInfo.point || 0 }}</text>
|
||||
</view>
|
||||
|
||||
<!-- TODO 芋艿：优化 -->
|
||||
<!-- <view class="total-box">-->
|
||||
<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
|
||||
<!-- <view>总支出￥{{ -state.pagination.expense }}</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChange"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<view class="new-point">
|
||||
<view class="l">
|
||||
<view class="b">1000</view>
|
||||
<view class="c">累计积分（带对接接口）</view>
|
||||
</view>
|
||||
<view class="l">
|
||||
<view class="b">1000</view>
|
||||
<view class="c">累计消费（带对接接口）</view>
|
||||
</view>
|
||||
<view class="l">
|
||||
<view class="b">0</view>
|
||||
<view class="c">冻结积分</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- list -->
|
||||
<view class="list-box">
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="list-item ss-flex ss-col-center ss-row-between"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="ss-flex-col">
|
||||
<view class="name"
|
||||
>{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view
|
||||
>
|
||||
<view class="time">{{
|
||||
<view class='new-tab'>
|
||||
<view class="l l " :class="state.isShow == 1 ? 'on': ''" @click="state.isShow = 1">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/6fcdf0863d8665f2857ebfef5bb4a1d13df5d0ac8fa2517b16c3fa06f0b93a8a.png"
|
||||
class="img2"></image>
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/9e5801a7825e99274b7963f87c2044839640fe3b3e706c49238157449385cc87.png"
|
||||
class="img"></image>
|
||||
<text class="tx">分值明细</text>
|
||||
</view>
|
||||
<view class="l r" :class="state.isShow == 2 ? 'on': ''" @click="state.isShow = 2">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/0c9af735ebcd6a6b9c480b237c20331747cf69f8991150be10de4eef1f7c9173.png"
|
||||
class="img2"></image>
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/00bc0a57ca7f7a9ba79415b6f48a671669e7ed5f930e4b6e5096bcd8101d499e.png"
|
||||
class="img"></image>
|
||||
<text class="tx">分值提升</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab -->
|
||||
<!-- <su-sticky :customNavHeight="sys_navBar"> -->
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between" v-if="state.isShow == 1">
|
||||
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<!-- TODO 芋艿：优化 -->
|
||||
<!-- <view class="total-box">-->
|
||||
<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>-->
|
||||
<!-- <view>总支出￥{{ -state.pagination.expense }}</view>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<!-- <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs> -->
|
||||
<!-- </su-sticky> -->
|
||||
<!-- icon -->
|
||||
<view class="icon-img" v-if="state.isShow == 2">
|
||||
<view class="list" @click="sheep.$router.go('/pages/goods/list')">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/90eef89176c26da9a605a7b22c4b0beea07d970fc5da7204effb51e970546112.png"
|
||||
class="img"></image>
|
||||
<view class="c">购买商品可获得积分奖励</view>
|
||||
<view class="b">赚积分</view>
|
||||
</view>
|
||||
<view class="list" @click="sheep.$router.go('/pages/app/sign')">
|
||||
<image
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/90eef89176c26da9a605a7b22c4b0beea07d970fc5da7204effb51e970546112.png"
|
||||
class="img"></image>
|
||||
<view class="c">每日签到可获得积分奖励</view>
|
||||
<view class="b">赚积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- list -->
|
||||
<view class="list-box" v-if="state.isShow == 1">
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view class="list-item ss-flex ss-col-center ss-row-between" v-for="item in state.pagination.list"
|
||||
:key="item.id">
|
||||
<view class="ss-flex-col">
|
||||
<view class="name">{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view>
|
||||
<view class="time">{{
|
||||
sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="add" v-if="item.point > 0">+{{ item.point }}</view>
|
||||
<view class="minus" v-else>{{ item.point }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="add" v-if="item.point > 0">+{{ item.point }}</view>
|
||||
<view class="minus" v-else>{{ item.point }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
|
||||
</view>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
<uni-load-more v-if="state.pagination.total > 0 && state.isShow == 1" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="onLoadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
}" @tap="onLoadMore" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
import PointApi from '@/sheep/api/member/point';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
import PointApi from '@/sheep/api/member/point';
|
||||
import {
|
||||
resetPagination
|
||||
} from '@/sheep/util';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
list: 0,
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
pageNo: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
date: [],
|
||||
today: '',
|
||||
});
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
list: 0,
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
pageNo: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
date: [],
|
||||
today: '',
|
||||
isShow: 1
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
value: 'false',
|
||||
},
|
||||
];
|
||||
const tabMaps = [{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
value: 'false',
|
||||
},
|
||||
];
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
|
||||
async function getLogList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await PointApi.getPointRecordPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
|
||||
'createTime[0]': state.date[0] + ' 00:00:00',
|
||||
'createTime[1]': state.date[1] + ' 23:59:59',
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
async function getLogList() {
|
||||
state.loadStatus = 'loading';
|
||||
let {
|
||||
code,
|
||||
data
|
||||
} = await PointApi.getPointRecordPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
|
||||
'createTime[0]': state.date[0] + ' 00:00:00',
|
||||
'createTime[1]': state.date[1] + ' 23:59:59',
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
state.today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [state.today, state.today];
|
||||
getLogList();
|
||||
});
|
||||
onLoad(() => {
|
||||
state.today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [state.today, state.today];
|
||||
getLogList();
|
||||
});
|
||||
|
||||
function onChange(e) {
|
||||
state.currentTab = e.index;
|
||||
resetPagination(state.pagination);
|
||||
getLogList();
|
||||
}
|
||||
function onChange(e) {
|
||||
state.currentTab = e.index;
|
||||
resetPagination(state.pagination);
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
resetPagination(state.pagination);
|
||||
getLogList();
|
||||
}
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
resetPagination(state.pagination);
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function onLoadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getLogList();
|
||||
}
|
||||
function onLoadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getLogList();
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
onLoadMore();
|
||||
});
|
||||
onReachBottom(() => {
|
||||
onLoadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
|
||||
no-repeat;
|
||||
background-size: 750rpx 100%;
|
||||
padding: 0 0 120rpx 0;
|
||||
box-sizing: border-box;
|
||||
.icon-img {
|
||||
background-color: white;
|
||||
padding-top: 20px;
|
||||
display: grid;
|
||||
|
||||
.score-box {
|
||||
height: 100%;
|
||||
.list {
|
||||
display: flex;
|
||||
width: 89%;
|
||||
margin: 0 auto;
|
||||
padding: 20px 12px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 251, 242);
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
color: rgba(198, 179, 114);
|
||||
|
||||
.all-num {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.img {
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.all-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
.c {
|
||||
font-size: 18px;
|
||||
color: rgba(198, 179, 114);
|
||||
width: 50%;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.cicon-help-o {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.b {
|
||||
border: 1px solid rgba(183, 175, 128);
|
||||
padding: 4px 18px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
.filter-box {
|
||||
height: 114rpx;
|
||||
background-color: $bg-page;
|
||||
.header-box {
|
||||
width: 100%;
|
||||
// background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
|
||||
// no-repeat;
|
||||
background: rgb(193, 145, 81);
|
||||
background-size: 750rpx 100%;
|
||||
padding: 0 0 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
.new-tab {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 22px;
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
.l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45%;
|
||||
padding: 13px 0;
|
||||
background: rgba(247, 247, 247);
|
||||
border-radius: 10px 0 0 0;
|
||||
|
||||
.img2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img,
|
||||
.img2 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.list-item {
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
padding: 30rpx;
|
||||
&.on {
|
||||
background: white;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
.img2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
.tx {
|
||||
color: #c19151;
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(196, 196, 196, 1);
|
||||
line-height: 24px;
|
||||
}
|
||||
.tx {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
font-size: 30rpx;
|
||||
.r {
|
||||
border-radius: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
color: #e6b873;
|
||||
}
|
||||
.new-point {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
.minus {
|
||||
font-size: 30rpx;
|
||||
.l {
|
||||
&>view {
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
font-weight: 500;
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.b {
|
||||
margin-bottom: 7px;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.c {
|
||||
font-size: 25rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.score-box {
|
||||
height: 100%;
|
||||
|
||||
.all-num {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.all-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cicon-help-o {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
.filter-box {
|
||||
height: 114rpx;
|
||||
background-color: $bg-page;
|
||||
background: rgb(193, 145, 81);
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.list-item {
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
padding: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(196, 196, 196, 1);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.add {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: #e6b873;
|
||||
}
|
||||
|
||||
.minus {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -66,9 +66,12 @@
|
||||
<!-- 用户组件：用户卡片 -->
|
||||
<s-user-card v-if="type === 'UserCard'" />
|
||||
<view v-if="type === 'UserOrder'" class="new-huiy" @click="
|
||||
sheep.$router.go('/pages/user/user_vip/index')
|
||||
sheep.$router.go('/pages/user/user_vip/list')
|
||||
">
|
||||
<view class="new-button">立即开通</view>
|
||||
<view class="new-button" v-if="userInfo.activate == 1">正在试用</view>
|
||||
<view class="new-button" v-if="userInfo.activate == 2">开通</view>
|
||||
<view class="new-button" v-if="userInfo.activate == 3">永久</view>
|
||||
<view class="new-button" v-if="userInfo.activate == 0">立即开通</view>
|
||||
<image class="seckill1" mode="aspectFit"
|
||||
src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png" />
|
||||
</view>
|
||||
@ -86,13 +89,15 @@
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
unref
|
||||
unref,
|
||||
computed
|
||||
} from 'vue';
|
||||
import AddressApi from '@/sheep/api/member/address';
|
||||
const state = reactive({
|
||||
model: [],
|
||||
});
|
||||
|
||||
// 用户信息
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const ff = async (id) => {
|
||||
let {
|
||||
code,
|
||||
|
||||
@ -225,7 +225,6 @@
|
||||
|
||||
.new-class {
|
||||
background: white;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
:deep(.sm-goods-card) {
|
||||
|
||||
@ -1,261 +1,253 @@
|
||||
<template>
|
||||
<view
|
||||
class="page-app"
|
||||
:class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
|
||||
>
|
||||
<view class="page-main" :style="[bgMain]">
|
||||
<!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
|
||||
<su-navbar
|
||||
v-if="navbar === 'normal'"
|
||||
:title="title"
|
||||
statusBar
|
||||
:color="color"
|
||||
:tools="tools"
|
||||
:opacityBgUi="opacityBgUi"
|
||||
@search="(e) => emits('search', e)"
|
||||
:defaultSearch="defaultSearch"
|
||||
:headerBtns = "headerBtns"
|
||||
:backgroundColor="navbarbackgroundColor"
|
||||
:navBg="navBg"
|
||||
/>
|
||||
<view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]">
|
||||
<view class="page-main" :style="[bgMain]">
|
||||
<!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
|
||||
<su-navbar v-if="navbar === 'normal'" :title="title" statusBar :navbarbackgroundColor="navbarbackgroundColor" :color="color" :tools="tools"
|
||||
:opacityBgUi="opacityBgUi" @search="(e) => emits('search', e)" :defaultSearch="defaultSearch"
|
||||
:headerBtns="headerBtns" :backgroundColor="backgroundColor" :navBg="navBg" />
|
||||
|
||||
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
|
||||
<s-custom-navbar
|
||||
v-else-if="navbar === 'custom' && navbarMode === 'normal'"
|
||||
:data="navbarStyle"
|
||||
:showLeftButton="showLeftButton"
|
||||
/>
|
||||
<view class="page-body" :style="[bgBody]">
|
||||
<!-- 顶部导航栏-情况3：沉浸式头部 -->
|
||||
<su-inner-navbar v-if="navbar === 'inner'" :title="title" />
|
||||
<view
|
||||
v-if="navbar === 'inner'"
|
||||
:style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"
|
||||
></view>
|
||||
<!-- 顶部导航栏-情况2：装修组件导航栏-标准 -->
|
||||
<s-custom-navbar v-else-if="navbar === 'custom' && navbarMode === 'normal'" :data="navbarStyle"
|
||||
:showLeftButton="showLeftButton" />
|
||||
<view class="page-body" :style="[bgBody]">
|
||||
<!-- 顶部导航栏-情况3：沉浸式头部 -->
|
||||
<su-inner-navbar v-if="navbar === 'inner'" :title="title" :navbarbackgroundColor="navbarbackgroundColor" />
|
||||
<view v-if="navbar === 'inner'" :style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"></view>
|
||||
|
||||
<!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
|
||||
<s-custom-navbar
|
||||
v-if="navbar === 'custom' && navbarMode === 'inner'"
|
||||
:data="navbarStyle"
|
||||
:showLeftButton="showLeftButton"
|
||||
/>
|
||||
<!-- 顶部导航栏-情况4：装修组件导航栏-沉浸式 -->
|
||||
<s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle"
|
||||
:showLeftButton="showLeftButton" />
|
||||
|
||||
<!-- 页面内容插槽 -->
|
||||
<slot />
|
||||
<!-- 页面内容插槽 -->
|
||||
<slot />
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<s-tabbar v-if="tabbar !== ''" :path="tabbar" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<s-tabbar v-if="tabbar !== ''" :path="tabbar" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-modal">
|
||||
<!-- 全局授权弹窗 -->
|
||||
<s-auth-modal />
|
||||
<!-- 全局分享弹窗 -->
|
||||
<s-share-modal :shareInfo="shareInfo" />
|
||||
<!-- 全局快捷入口 -->
|
||||
<s-menu-tools />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-modal">
|
||||
<!-- 全局授权弹窗 -->
|
||||
<s-auth-modal />
|
||||
<!-- 全局分享弹窗 -->
|
||||
<s-share-modal :shareInfo="shareInfo" />
|
||||
<!-- 全局快捷入口 -->
|
||||
<s-menu-tools />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 模板组件 - 提供页面公共组件，属性，方法
|
||||
*/
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
// #ifdef MP-WEIXIN
|
||||
import { onShareAppMessage } from '@dcloudio/uni-app';
|
||||
// #endif
|
||||
/**
|
||||
* 模板组件 - 提供页面公共组件，属性，方法
|
||||
*/
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
// #ifdef MP-WEIXIN
|
||||
import {
|
||||
onShareAppMessage
|
||||
} from '@dcloudio/uni-app';
|
||||
// #endif
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
headerBtns: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbarbackgroundColor:{
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbar: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
opacityBgUi: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tools: {
|
||||
type: String,
|
||||
default: 'title',
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbarStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
styleType: '',
|
||||
type: '',
|
||||
color: '',
|
||||
src: '',
|
||||
list: [],
|
||||
alwaysShow: 0,
|
||||
}),
|
||||
},
|
||||
bgStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: '',
|
||||
color: 'var(--ui-BG-1)',
|
||||
}),
|
||||
},
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
},
|
||||
onShareAppMessage: {
|
||||
type: [Boolean, Object],
|
||||
default: true,
|
||||
},
|
||||
leftWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
rightWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
defaultSearch: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//展示返回按钮
|
||||
showLeftButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
navBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['search']);
|
||||
const props = defineProps({
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
headerBtns: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbarbackgroundColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbar: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
opacityBgUi: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tools: {
|
||||
type: String,
|
||||
default: 'title',
|
||||
},
|
||||
keyword: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbarStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
styleType: '',
|
||||
type: '',
|
||||
color: '',
|
||||
src: '',
|
||||
list: [],
|
||||
alwaysShow: 0,
|
||||
}),
|
||||
},
|
||||
bgStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: '',
|
||||
color: 'var(--ui-BG-1)',
|
||||
}),
|
||||
},
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
},
|
||||
onShareAppMessage: {
|
||||
type: [Boolean, Object],
|
||||
default: true,
|
||||
},
|
||||
leftWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
rightWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
defaultSearch: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//展示返回按钮
|
||||
showLeftButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
navBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['search']);
|
||||
|
||||
const sysStore = sheep.$store('sys');
|
||||
const userStore = sheep.$store('user');
|
||||
const appStore = sheep.$store('app');
|
||||
const modalStore = sheep.$store('modal');
|
||||
const sys = computed(() => sysStore);
|
||||
const sysStore = sheep.$store('sys');
|
||||
const userStore = sheep.$store('user');
|
||||
const appStore = sheep.$store('app');
|
||||
const modalStore = sheep.$store('modal');
|
||||
const sys = computed(() => sysStore);
|
||||
// 导航栏模式(因为有自定义导航栏 需要计算)
|
||||
const navbarMode = computed(() => {
|
||||
if (props.navbar === 'normal' || props.navbarStyle.styleType === 'normal') {
|
||||
return 'normal';
|
||||
}
|
||||
return 'inner';
|
||||
});
|
||||
|
||||
// 导航栏模式(因为有自定义导航栏 需要计算)
|
||||
const navbarMode = computed(() => {
|
||||
if (props.navbar === 'normal' || props.navbarStyle.styleType === 'normal') {
|
||||
return 'normal';
|
||||
}
|
||||
return 'inner';
|
||||
});
|
||||
|
||||
// 背景1
|
||||
const bgMain = computed(() => {
|
||||
if (navbarMode.value === 'inner') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||
// 背景1
|
||||
const bgMain = computed(() => {
|
||||
if (navbarMode.value === 'inner') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||
props.bgStyle.backgroundImage,
|
||||
)}) no-repeat top center / 100% auto`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// 背景2
|
||||
const bgBody = computed(() => {
|
||||
if (navbarMode.value === 'normal') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||
// 背景2
|
||||
const bgBody = computed(() => {
|
||||
if (navbarMode.value === 'normal') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||
props.bgStyle.backgroundImage,
|
||||
)}) no-repeat top center / 100% auto`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (props.onShareAppMessage === true) {
|
||||
return sheep.$platform.share.getShareInfo();
|
||||
} else {
|
||||
if (!isEmpty(props.onShareAppMessage)) {
|
||||
sheep.$platform.share.updateShareInfo(props.onShareAppMessage);
|
||||
return props.onShareAppMessage;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (props.onShareAppMessage === true) {
|
||||
return sheep.$platform.share.getShareInfo();
|
||||
} else {
|
||||
if (!isEmpty(props.onShareAppMessage)) {
|
||||
sheep.$platform.share.updateShareInfo(props.onShareAppMessage);
|
||||
return props.onShareAppMessage;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序分享
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: shareInfo.value.title,
|
||||
path: shareInfo.value.path,
|
||||
imageUrl: shareInfo.value.image,
|
||||
};
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序分享
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: shareInfo.value.title,
|
||||
path: shareInfo.value.path,
|
||||
imageUrl: shareInfo.value.image,
|
||||
};
|
||||
});
|
||||
// #endif
|
||||
|
||||
onShow(() => {
|
||||
if (!isEmpty(shareInfo.value)) {
|
||||
sheep.$platform.share.updateShareInfo(shareInfo.value);
|
||||
}
|
||||
});
|
||||
onShow(() => {
|
||||
if (!isEmpty(shareInfo.value)) {
|
||||
sheep.$platform.share.updateShareInfo(shareInfo.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-app {
|
||||
position: relative;
|
||||
color: var(--ui-TC);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.page-app {
|
||||
position: relative;
|
||||
color: var(--ui-TC);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.page-main {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.page-main {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.page-body {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.page-body {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.page-img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,35 +25,49 @@ const user = async (poster) => {
|
||||
text: userInfo.nickname,
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
fontSize: 17,
|
||||
fontWeight: 700,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 0.4,
|
||||
left: width / 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'image',
|
||||
src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.4,
|
||||
top: width * 0.16,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
top: width * 1.33,
|
||||
left: width / 2.2,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '邀请您加入众悦e家',
|
||||
css: {
|
||||
color: '#333',
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'sans-serif',
|
||||
position: 'fixed',
|
||||
top: width * 1.41,
|
||||
left: width / 2.2,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'image',
|
||||
// src: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
// css: {
|
||||
// position: 'fixed',
|
||||
// left: width * 0.4,
|
||||
// top: width * 0.16,
|
||||
// width: width * 0.2,
|
||||
// height: width * 0.2,
|
||||
// },
|
||||
// },
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
type: 'qrcode',
|
||||
text: poster.shareInfo.link,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.35,
|
||||
top: width * 0.84,
|
||||
width: width * 0.3,
|
||||
height: width * 0.3,
|
||||
left: width * 0.25,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
@ -63,10 +77,10 @@ const user = async (poster) => {
|
||||
src: wxa_qrcode,
|
||||
css: {
|
||||
position: 'fixed',
|
||||
left: width * 0.35,
|
||||
top: width * 0.84,
|
||||
width: width * 0.3,
|
||||
height: width * 0.3,
|
||||
left: width * 0.22,
|
||||
top: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
},
|
||||
// #endif
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</button>
|
||||
|
||||
<!-- 操作 ③：生成链接 -->
|
||||
<button
|
||||
<!-- <button
|
||||
v-if="shareConfig.methods.includes('link')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@tap="onShareByCopyLink"
|
||||
@ -54,7 +54,7 @@
|
||||
mode=""
|
||||
/>
|
||||
<text class="share-title">复制链接</text>
|
||||
</button>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-box ss-m-r-52">
|
||||
<button class="ss-reset-button" @tap="showShareModal">
|
||||
<!-- <button class="ss-reset-button" @tap="showShareModal">
|
||||
<text class="sicon-qrcode"></text>
|
||||
</button>
|
||||
</button> -->
|
||||
<!-- <view class="qiandao" @click="sheep.$router.go('/pages/app/sign');">
|
||||
签到
|
||||
</view> -->
|
||||
|
||||
@ -2,7 +2,6 @@ import $store from '@/sheep/store';
|
||||
import { showAuthModal, showShareModal } from '@/sheep/hooks/useModal';
|
||||
import { isNumber, isString, isEmpty, startsWith, isObject, isNil, clone } from 'lodash';
|
||||
import throttle from '@/sheep/helper/throttle';
|
||||
|
||||
const _go = (
|
||||
path,
|
||||
params = {},
|
||||
|
||||
@ -66,7 +66,7 @@ const app = defineStore({
|
||||
copyright: '全部开源，个人与企业可 100% 免费使用',
|
||||
copytime: 'Copyright© 2018-2024',
|
||||
|
||||
cdnurl: 'https://file.sheepjs.com', // 云存储域名
|
||||
cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
|
||||
filesystem: 'qcloud', // 云存储平台
|
||||
};
|
||||
this.platform = {
|
||||
@ -74,9 +74,9 @@ const app = defineStore({
|
||||
methods: ['poster', 'link'],
|
||||
linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
|
||||
posterInfo: {
|
||||
user_bg: '/static/img/shop/config/user-poster-bg.png',
|
||||
goods_bg: '/static/img/shop/config/goods-poster-bg.png',
|
||||
groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
|
||||
user_bg: '/shangcheng/user-poster-bg.png',
|
||||
goods_bg: '/shangcheng/goods-poster-bg.png',
|
||||
groupon_bg: '/shangcheng/groupon-poster-bg.png',
|
||||
},
|
||||
},
|
||||
bind_mobile: 0,
|
||||
|
||||
@ -1,365 +1,379 @@
|
||||
<template>
|
||||
<su-fixed
|
||||
:noFixed="props.noFixed"
|
||||
:alway="props.alway"
|
||||
:bgStyles="props.bgStyles"
|
||||
:val="0"
|
||||
:index="props.zIndex"
|
||||
noNav
|
||||
:bg="props.bg"
|
||||
:ui="props.ui"
|
||||
:opacity="props.opacity"
|
||||
:placeholder="props.placeholder"
|
||||
>
|
||||
<su-status-bar />
|
||||
<!--
|
||||
<su-fixed :noFixed="props.noFixed" :alway="props.alway" :bgStyles="props.bgStyles" :val="0" :index="props.zIndex"
|
||||
noNav :bg="props.bg" :ui="props.ui" :opacity="props.opacity" :placeholder="props.placeholder">
|
||||
<su-status-bar :navbarbackgroundColor="navbarbackgroundColor" />
|
||||
<!--
|
||||
:class="[{ 'border-bottom': !props.opacity && props.bg != 'bg-none' }]"
|
||||
-->
|
||||
<view class="ui-navbar-box">
|
||||
<view
|
||||
class="ui-bar ss-p-x-20"
|
||||
:class="state.isDark ? 'text-white' : 'text-black'"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<view class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
|
||||
<text class="sicon-more" />
|
||||
</view>
|
||||
</view>
|
||||
<slot name="center">
|
||||
<view class="center navbar-title">{{ title }}</view>
|
||||
</slot>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[state.capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<view class="ui-navbar-box">
|
||||
<view class="ui-bar ss-p-x-20" :class="state.isDark ? 'text-white' : 'text-black'"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]">
|
||||
<view class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
|
||||
<text class="sicon-more" />
|
||||
</view>
|
||||
</view>
|
||||
<slot name="center">
|
||||
<view class="center navbar-title">{{ title }}</view>
|
||||
</slot>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[state.capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 标题栏 - 基础组件navbar
|
||||
*
|
||||
* @param {Number} zIndex = 100 - 层级
|
||||
* @param {Boolean} back = true - 是否返回上一页
|
||||
* @param {String} backtext = '' - 返回文本
|
||||
* @param {String} bg = 'bg-white' - 公共Class
|
||||
* @param {String} status = '' - 状态栏颜色
|
||||
* @param {Boolean} alway = true - 是否常驻
|
||||
* @param {Boolean} opacity = false - 是否开启透明渐变
|
||||
* @param {Boolean} noFixed = false - 是否浮动
|
||||
* @param {String} ui = '' - 公共Class
|
||||
* @param {Boolean} capsule = false - 是否开启胶囊返回
|
||||
* @param {Boolean} stopBack = false - 是否禁用返回
|
||||
* @param {Boolean} placeholder = true - 是否开启占位
|
||||
* @param {Object} bgStyles = {} - 背景样式
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 标题栏 - 基础组件navbar
|
||||
*
|
||||
* @param {Number} zIndex = 100 - 层级
|
||||
* @param {Boolean} back = true - 是否返回上一页
|
||||
* @param {String} backtext = '' - 返回文本
|
||||
* @param {String} bg = 'bg-white' - 公共Class
|
||||
* @param {String} status = '' - 状态栏颜色
|
||||
* @param {Boolean} alway = true - 是否常驻
|
||||
* @param {Boolean} opacity = false - 是否开启透明渐变
|
||||
* @param {Boolean} noFixed = false - 是否浮动
|
||||
* @param {String} ui = '' - 公共Class
|
||||
* @param {Boolean} capsule = false - 是否开启胶囊返回
|
||||
* @param {Boolean} stopBack = false - 是否禁用返回
|
||||
* @param {Boolean} placeholder = true - 是否开启占位
|
||||
* @param {Object} bgStyles = {} - 背景样式
|
||||
*
|
||||
*/
|
||||
|
||||
import { computed, reactive, onBeforeMount, ref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
onBeforeMount,
|
||||
ref
|
||||
} from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
showMenuTools,
|
||||
closeMenuTools
|
||||
} from '@/sheep/hooks/useModal';
|
||||
|
||||
// 本地数据
|
||||
const state = reactive({
|
||||
statusCur: '',
|
||||
capsuleStyle: {},
|
||||
capsuleBack: {},
|
||||
isDark: true,
|
||||
});
|
||||
// 本地数据
|
||||
const state = reactive({
|
||||
statusCur: '',
|
||||
capsuleStyle: {},
|
||||
capsuleBack: {},
|
||||
isDark: true,
|
||||
});
|
||||
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const sys_statusBar = sheep.$platform.device.statusBarHeight;
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
const props = defineProps({
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
const props = defineProps({
|
||||
|
||||
title: {
|
||||
//返回文本
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
// 常驻
|
||||
alway: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
opacity: {
|
||||
//是否开启滑动渐变
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
noFixed: {
|
||||
//是否浮动
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
capsule: {
|
||||
//是否开启胶囊返回
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stopBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: [Boolean],
|
||||
default: false,
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
navbarbackgroundColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
|
||||
const emits = defineEmits(['navback', 'clickLeft']);
|
||||
const hasHistory = sheep.$router.hasHistory();
|
||||
title: {
|
||||
//返回文本
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
// 常驻
|
||||
alway: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
opacity: {
|
||||
//是否开启滑动渐变
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
noFixed: {
|
||||
//是否浮动
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
capsule: {
|
||||
//是否开启胶囊返回
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stopBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: [Boolean],
|
||||
default: false,
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default () {},
|
||||
},
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
init();
|
||||
});
|
||||
const emits = defineEmits(['navback', 'clickLeft']);
|
||||
const hasHistory = sheep.$router.hasHistory();
|
||||
|
||||
onPageScroll((e) => {
|
||||
let top = e.scrollTop;
|
||||
state.isDark = top < sheep.$platform.navbar;
|
||||
});
|
||||
onBeforeMount(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
function onClickLeft() {
|
||||
if (hasHistory) {
|
||||
sheep.$router.back();
|
||||
} else {
|
||||
sheep.$router.go('/pages/index/index');
|
||||
}
|
||||
emits('clickLeft');
|
||||
}
|
||||
function onClickRight() {
|
||||
showMenuTools();
|
||||
}
|
||||
onPageScroll((e) => {
|
||||
let top = e.scrollTop;
|
||||
state.isDark = top < sheep.$platform.navbar;
|
||||
});
|
||||
|
||||
// 初始化
|
||||
const init = () => {
|
||||
// #ifdef MP-ALIPAY
|
||||
my.hideAllFavoriteMenu();
|
||||
// #endif
|
||||
state.capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
};
|
||||
function onClickLeft() {
|
||||
if (hasHistory) {
|
||||
sheep.$router.back();
|
||||
} else {
|
||||
sheep.$router.go('/pages/index/index');
|
||||
}
|
||||
emits('clickLeft');
|
||||
}
|
||||
|
||||
state.capsuleBack = state.capsuleStyle;
|
||||
};
|
||||
function onClickRight() {
|
||||
showMenuTools();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
const init = () => {
|
||||
// #ifdef MP-ALIPAY
|
||||
my.hideAllFavoriteMenu();
|
||||
// #endif
|
||||
state.capsuleStyle = {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
};
|
||||
|
||||
state.capsuleBack = state.capsuleStyle;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
.sicon-back {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.sicon-home {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.icon-button {
|
||||
width: 67rpx;
|
||||
height: 56rpx;
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
}
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.tools-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.ui-navbar-box {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
|
||||
.ui-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
|
||||
.left {
|
||||
@include flex-bar;
|
||||
.sicon-back {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.back {
|
||||
@include flex-bar;
|
||||
.sicon-home {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
@include flex-center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin: 0 10rpx;
|
||||
font-size: 46rpx !important;
|
||||
.sicon-more {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&.opacityIcon {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(127, 127, 127, 0.5);
|
||||
.icon-button {
|
||||
width: 67rpx;
|
||||
height: 56rpx;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0.1;
|
||||
border: 1px solid currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
._icon-back {
|
||||
opacity: 0;
|
||||
}
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
.tools-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.capsule {
|
||||
@include flex-bar;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
.ui-navbar-box {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
&.dark {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.ui-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&.light {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.left {
|
||||
@include flex-bar;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
background-color: currentColor;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.back {
|
||||
@include flex-bar;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0.1;
|
||||
border: 1px solid currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
.back-icon {
|
||||
@include flex-center;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
margin: 0 10rpx;
|
||||
font-size: 46rpx !important;
|
||||
|
||||
.capsule-back,
|
||||
.capsule-home {
|
||||
@include flex-center;
|
||||
flex: 1;
|
||||
}
|
||||
&.opacityIcon {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(127, 127, 127, 0.5);
|
||||
|
||||
&.isFristPage {
|
||||
.capsule-back,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0.1;
|
||||
border: 1px solid currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
@include flex-bar;
|
||||
&::before {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
@include flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
/* #ifdef MP-ALIPAY */
|
||||
._icon-back {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
@include flex-center;
|
||||
text-overflow: ellipsis;
|
||||
// text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
height: 36px;
|
||||
max-width: calc(100vw - 200px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.capsule {
|
||||
@include flex-bar;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
|
||||
.ui-bar-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
&.dark {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
left: 50%;
|
||||
top: 20%;
|
||||
background-color: currentColor;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 200%;
|
||||
width: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
opacity: 0.1;
|
||||
border: 1px solid currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.capsule-back,
|
||||
.capsule-home {
|
||||
@include flex-center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.isFristPage {
|
||||
|
||||
.capsule-back,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
@include flex-bar;
|
||||
|
||||
.right-content {
|
||||
@include flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
@include flex-center;
|
||||
text-overflow: ellipsis;
|
||||
// text-align: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
height: 36px;
|
||||
max-width: calc(100vw - 200px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-bar-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<view class="uni-navbar" :class="{ 'uni-dark': dark }">
|
||||
<view :style="{
|
||||
background: backgroundColor,
|
||||
background: backgroundColor || navbarbackgroundColor,
|
||||
}"
|
||||
:class="{
|
||||
'uni-navbar--fixed': fixed,
|
||||
@ -10,7 +10,7 @@
|
||||
'uni-navbar--border': border,
|
||||
}" class="uni-navbar__content">
|
||||
<view class="fixed-bg" :class="[opacity ? '' : opacityBgUi]"></view>
|
||||
<su-status-bar v-if="statusBar" :navBg = "navBg" />
|
||||
<su-status-bar v-if="statusBar" :navBg = "navBg"/>
|
||||
<view :style="{
|
||||
color: themeColor,
|
||||
height: navbarHeight,
|
||||
@ -111,6 +111,10 @@
|
||||
|
||||
const emits = defineEmits(['clickLeft', 'clickRight', 'clickTitle', 'search']);
|
||||
const props = defineProps({
|
||||
navbarbackgroundColor:{
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -202,7 +206,7 @@
|
||||
defaultSearch: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
const capsuleStyle = computed(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!-- 自定义状态栏 -->
|
||||
<template>
|
||||
<view :style="{ height: statusBarHeight }" class="uni-status-bar" :class="navBg? 'ss' : ''">
|
||||
<view :style="{ height: statusBarHeight,background: navbarbackgroundColor }" class="uni-status-bar" :class="navBg? 'ss' : ''" >
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
@ -11,6 +11,10 @@
|
||||
navBg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
navbarbackgroundColor:{
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
})
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight - 2 + 'px';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user