675 lines
18 KiB
Vue
675 lines
18 KiB
Vue
<template>
|
||
<view class="container">
|
||
<image
|
||
class="topBack"
|
||
:src="
|
||
userInfo.shopExtendList
|
||
? userInfo.shopExtendList[1].value
|
||
? userInfo.shopExtendList[1].value
|
||
: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'
|
||
: 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'
|
||
"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="myContent">
|
||
<view class="my_info flex-between">
|
||
<view class="my_info_left">
|
||
<image
|
||
class="my_info_left_head"
|
||
:src="userInfo.headImg"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="name">{{ userInfo.nickName }}</view>
|
||
</view>
|
||
<image
|
||
class="my_info_right_qr"
|
||
src="/static/icon/code.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
|
||
<!-- <image class="my_info_right_qr" @click="clickEvent" v-if="userInfo.isVip == 1 && ShopId"
|
||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill">
|
||
</image>
|
||
<view class="my_info_right" @click="clickEvent" v-if="userInfo.isVip == 0 && ShopId">
|
||
<text>免费入会</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<up-gap height="26rpx" bg-color="#F9F9F9"></up-gap>
|
||
<!-- <view class="my_item my_assets" @click="Myassets"> -->
|
||
<view class="my_item my_assets">
|
||
<view class="my_item_title u-m-t-12">我的资产</view>
|
||
<view class="amount">
|
||
<view class="u-flex u-flex-between u-m-t-20">
|
||
<view class="u-flex">
|
||
<image
|
||
style="width: 50rpx; height: 37rpx"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="color-333 font-14 u-m-l-20">储值</text>
|
||
</view>
|
||
<view class="u-flex color-666" @click="toChargeList">
|
||
<text class="font-12 u-m-r-4">{{ rechargeTotal }}家店</text>
|
||
<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-list">
|
||
<view
|
||
class="card-list-item"
|
||
v-for="(item, index) in rechargeList"
|
||
:key="index"
|
||
@click="toCharge(item)"
|
||
>
|
||
<up-image
|
||
radius="20rpx"
|
||
width="182rpx"
|
||
height="182rpx"
|
||
:src="item.logo"
|
||
></up-image>
|
||
<view class="info text-center">
|
||
<view class="color-333 u-m-t-14">
|
||
<text class="font-10">¥</text>
|
||
<text class="font-16 font-700">{{
|
||
item.amount || "0.00"
|
||
}}</text>
|
||
</view>
|
||
<view class="font-12 color-666 u-line-1">{{
|
||
item.shopName
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="u-flex u-flex-column u-flex-center"
|
||
style="width: 12px"
|
||
v-if="rechargeList.length"
|
||
@click="toChargeList"
|
||
>
|
||
<view class="text-center color-333 font-12">查看全部</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="vip u-m-t-40">
|
||
<view class="u-flex u-flex-between u-m-t-20">
|
||
<view class="u-flex">
|
||
<image
|
||
style="width: 50rpx; height: 40rpx"
|
||
src="/static/icon/vip.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="color-333 font-14 u-m-l-20">会员</text>
|
||
</view>
|
||
<view class="u-flex color-666" @click="tomemberList">
|
||
<text class="font-12 u-m-r-4">{{ memberTotal }}家店</text>
|
||
<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-list">
|
||
<view
|
||
class="card-list-item"
|
||
v-for="(item, index) in memberList"
|
||
:key="index"
|
||
@click="tomember(item)"
|
||
>
|
||
<up-image
|
||
radius="20rpx"
|
||
width="182rpx"
|
||
height="182rpx"
|
||
:src="item.logo"
|
||
></up-image>
|
||
<view class="info text-center">
|
||
<view class="font-12 color-666 u-m-t-14 u-line-1">{{
|
||
item.shopName
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="u-flex u-flex-column u-flex-center"
|
||
style="width: 12px"
|
||
v-if="memberList.length"
|
||
>
|
||
<view class="text-center color-333 font-12" @click="tomemberList"
|
||
>查看全部</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="amount">
|
||
<view class="u-flex u-flex-between u-m-t-20">
|
||
<view class="u-flex">
|
||
<image
|
||
style="width: 50rpx; height: 44rpx"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<text class="color-333 font-14 u-m-l-20">积分</text>
|
||
</view>
|
||
<view class="u-flex color-666" @click="toCoin">
|
||
<text class="font-12 u-m-r-4">{{ coinTotal }}家店</text>
|
||
<up-icon name="arrow-down" color="#666" size="12px"></up-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-list">
|
||
<view
|
||
class="card-list-item"
|
||
v-for="(item, index) in coinList"
|
||
:key="index"
|
||
@click="toCoin(item)"
|
||
>
|
||
<up-image
|
||
radius="20rpx"
|
||
width="182rpx"
|
||
height="182rpx"
|
||
:src="item.logo"
|
||
></up-image>
|
||
<view class="info text-center">
|
||
<view class="color-333 u-m-t-14">
|
||
<text class="font-10">¥</text>
|
||
<text class="font-16 font-700">{{
|
||
item.accountPoints || "0.00"
|
||
}}</text>
|
||
</view>
|
||
<view class="font-12 color-666 u-line-1">{{
|
||
item.shopName
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="u-flex u-flex-column u-flex-center"
|
||
style="width: 12px"
|
||
v-if="coinList.length"
|
||
@click="toCoin"
|
||
>
|
||
<view class="text-center color-333 font-12">查看全部</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="my_item my_fun u-m-t-30">
|
||
<view class="my_fun_list">
|
||
<view
|
||
class="my_list_item"
|
||
v-for="(item, index) in myFunList"
|
||
:key="index"
|
||
@click="clickTo(item, index)"
|
||
>
|
||
<view class="my_list_item_left">
|
||
<image
|
||
class="my_list_item_icon"
|
||
:src="item.icon"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="my_list_item_name">{{ item.name }}</view>
|
||
</view>
|
||
<view class="my_list_item_right u-flex">
|
||
<text v-if="item.type == 'score'" class="font-12">{{
|
||
userInfo.accountPoints || 0
|
||
}}</text>
|
||
<!-- <text v-else-if="item.type=='my_coupon'" class="font-12 ">{{userInfo.couponNum || 0}}</text> -->
|
||
<text class="font-12 color-999" v-else>查看</text>
|
||
<u-icon
|
||
class="u-m-t-2"
|
||
name="arrow-right"
|
||
color="#999999"
|
||
size="12"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <l-qrcode :value="wechatAcQrcode" @complete="e=>qrcodeResult(e)"/> -->
|
||
<view
|
||
class="qrcode u-flex u-col-center justify-between"
|
||
v-if="showQrcode"
|
||
>
|
||
<view>
|
||
<view class="color-000 font-14 font-bold">扫码关注公众号</view>
|
||
<view class="u-m-t-16 color-999 font-12"
|
||
>长按识别关注，更多优惠不能错过</view
|
||
>
|
||
</view>
|
||
<up-image
|
||
width="178rpx"
|
||
height="178rpx"
|
||
:show-menu-by-longpress="true"
|
||
:src="qrcode"
|
||
></up-image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 生成公众号二维码 -->
|
||
<we-qrcode @generate="(e) => qrcodeResult(e)"></we-qrcode>
|
||
|
||
<devetools></devetools>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import weQrcode from "@/components/wechat-ac-qrcode.vue";
|
||
import devetools from "@/components/devetools.vue";
|
||
|
||
import { ref, computed, onMounted, reactive, watch } from "vue";
|
||
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
|
||
import { productStore } from "@/stores/user.js";
|
||
import * as vipApi from "@/common/api/market/vip.js";
|
||
import * as rechargeApi from "@/common/api/market/recharge.js";
|
||
import { pointsShopList } from "@/common/api/account/points.js";
|
||
|
||
function qrcodeResult(res) {
|
||
qrcode.value = res;
|
||
}
|
||
|
||
const store = productStore();
|
||
const myFunList = ref([
|
||
// {
|
||
// name: "积分",
|
||
// type: "score",
|
||
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png",
|
||
// url: '/user/score/list'
|
||
// },
|
||
{
|
||
name: "优惠券",
|
||
type: "my_coupon",
|
||
icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png",
|
||
},
|
||
{
|
||
name: "分销",
|
||
type: "fenxiao",
|
||
icon: "/static/icon/fenxiao.svg",
|
||
},
|
||
{
|
||
name: "商家推送",
|
||
type: "msg",
|
||
icon: "/static/icon/msg.png",
|
||
},
|
||
// {
|
||
// name: "我的订单",
|
||
// type: "my_order",
|
||
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"
|
||
// },
|
||
// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
|
||
// {
|
||
// name: "个人资料",
|
||
// type: "myself",
|
||
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"
|
||
// },
|
||
// {
|
||
// name: "我的会员卡",
|
||
// type: "my_member",
|
||
// icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"
|
||
// },
|
||
// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
|
||
]);
|
||
|
||
const userInfo = reactive({});
|
||
|
||
const ShopId = ref(uni.cache.get("shopId"));
|
||
console.log("ShopId", uni.cache.get("shopId"));
|
||
|
||
function tomemberList() {
|
||
uni.navigateTo({
|
||
url: "/pages/user/member/list",
|
||
});
|
||
}
|
||
|
||
function tomember(item) {
|
||
uni.navigateTo({
|
||
url: "/user/vip/vip?shopId=" + item.shopId,
|
||
});
|
||
}
|
||
|
||
const clickEvent = () => {
|
||
if (ShopId.value) {
|
||
if (!userInfo.isVip) {
|
||
uni.navigateTo({
|
||
url: "/user/vip/buy-vip?shopId=" + ShopId.value,
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/user/vip/vip?shopId=" + ShopId.value,
|
||
});
|
||
}
|
||
|
||
// if (userInfo.isVip == 0) {
|
||
|
||
// uni.pro.navigateTo('user/member/memberdetails', {
|
||
// shopId: uni.cache.get('shopId')
|
||
// })
|
||
// } else {
|
||
// uni.pro.navigateTo('user/member/paycode', {
|
||
// shopId: uni.cache.get('shopId'),
|
||
// shopInfo: JSON.stringify(uni.cache.get('orderVIP').shopInfo)
|
||
// })
|
||
// }
|
||
} else {
|
||
uni.pro.navigateTo("member/list", {
|
||
type: "user_payCode",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 我的资产
|
||
const Myassets = () => {
|
||
if (uni.cache.get("shopId")) {
|
||
uni.pro.navigateTo("user/member/memberdetails", {
|
||
shopId: uni.cache.get("shopId"),
|
||
type: "index",
|
||
});
|
||
} else {
|
||
uni.pro.navigateTo("user/member/list", {
|
||
shopId: uni.cache.get("shopId"),
|
||
type: "index",
|
||
});
|
||
}
|
||
};
|
||
|
||
function toCharge(item) {
|
||
uni.navigateTo({
|
||
url: "/pages/user/member/czzx?shopId=" + item.shopId,
|
||
});
|
||
}
|
||
|
||
function toChargeList() {
|
||
uni.navigateTo({
|
||
url: "/pages/user/member/amount-list",
|
||
});
|
||
}
|
||
|
||
const clickTo = (item, index) => {
|
||
if (item.url) {
|
||
uni.navigateTo({
|
||
url: item.url,
|
||
});
|
||
return;
|
||
}
|
||
let shopId = null;
|
||
switch (item.type) {
|
||
case "msg":
|
||
uni.navigateTo({ url: "/pageChat/index" });
|
||
break;
|
||
case "my_order":
|
||
uni.pro.switchTab("order/index");
|
||
break;
|
||
case "my_member":
|
||
uni.pro.navigateTo("user/member/list");
|
||
break;
|
||
case "recharge":
|
||
if (uni.cache.get("shopId") && uni.cache.get("token")) {
|
||
uni.pro.navigateTo("member/index", {
|
||
shopId: uni.cache.get("shopId"),
|
||
type: "index",
|
||
});
|
||
} else {
|
||
uni.pro.navigateTo("member/list", {
|
||
type: "user_recharge",
|
||
});
|
||
}
|
||
break;
|
||
case "points": //积分
|
||
if (uni.cache.get("shopId") && uni.cache.get("token")) {
|
||
uni.pro.navigateTo("/pagesPoints/index/index", {
|
||
shopId: uni.cache.get("shopId"),
|
||
type: "user",
|
||
});
|
||
} else {
|
||
uni.pro.navigateTo("member/list", {
|
||
type: "user_points",
|
||
});
|
||
}
|
||
break;
|
||
case "my_coupon": //优惠券
|
||
uni.pro.navigateTo("user/coupon", {
|
||
shopId: uni.cache.get("shopId") || "",
|
||
});
|
||
break;
|
||
case "fenxiao": //优惠券
|
||
uni.navigateTo({
|
||
url: "/distribution/index",
|
||
});
|
||
break;
|
||
case "myself": //内部页面
|
||
uni.pro.navigateTo("user/myself");
|
||
break;
|
||
case "scan_applet":
|
||
uni.navigateToMiniProgram(JSON.parse(item.value));
|
||
break;
|
||
case "absolute": //外链url
|
||
uni.navigateTo({
|
||
url: `/pages/webview/webview?url=${item.menuUrl}`,
|
||
});
|
||
break;
|
||
}
|
||
};
|
||
|
||
const memberList = ref([]);
|
||
const rechargeList = ref([]);
|
||
const memberTotal = ref(0);
|
||
const rechargeTotal = ref(0);
|
||
|
||
const coinTotal = ref(0);
|
||
const coinList = ref([]);
|
||
async function getData() {
|
||
const res = await vipApi.list();
|
||
memberTotal.value = res.length;
|
||
memberList.value = res.slice(0, 3);
|
||
const res1 = await rechargeApi.list();
|
||
rechargeTotal.value = res1.length;
|
||
rechargeList.value = res1.slice(0, 3);
|
||
|
||
const res3 = await pointsShopList();
|
||
coinTotal.value = res3.length;
|
||
coinList.value = res3;
|
||
}
|
||
|
||
function toCoin() {
|
||
uni.navigateTo({
|
||
url: "/user/score/list",
|
||
});
|
||
}
|
||
|
||
onShow(() => {
|
||
store.actionsAPIuser();
|
||
if (uni.cache.get("shopId")) {
|
||
Object.assign(userInfo, uni.cache.get("orderVIP"));
|
||
} else {
|
||
Object.assign(userInfo, {
|
||
...uni.cache.get("userInfo"),
|
||
...uni.cache.get("userInfo").assetsSummary,
|
||
});
|
||
}
|
||
console.log("userInfo", userInfo);
|
||
getData();
|
||
});
|
||
|
||
const qrcode = ref("");
|
||
const showQrcode = computed(() => {
|
||
const followIndex = uni.cache.get("followIndex");
|
||
if (followIndex == "mine" && qrcode.value) {
|
||
return true;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.topBack {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
position: absolute;
|
||
}
|
||
|
||
.myContent {
|
||
position: relative;
|
||
z-index: 1;
|
||
padding: 298rpx 0 60rpx 0;
|
||
|
||
.my_info {
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 32rpx 32rpx;
|
||
border-radius: 18rpx;
|
||
|
||
.my_info_left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.my_info_left_head {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
margin-right: 18rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.my_info_right {
|
||
width: 136rpx;
|
||
height: 48rpx;
|
||
background-color: #e3ad7f;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.my_info_right_qr {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.my_item {
|
||
background-color: #fff;
|
||
padding: 0 32rpx;
|
||
border-radius: 18rpx;
|
||
|
||
.my_item_title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
}
|
||
}
|
||
|
||
.my_assets {
|
||
.my_item_title {
|
||
margin-bottom: 26rpx;
|
||
}
|
||
|
||
.my_assets_list {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 38rpx;
|
||
|
||
.my_list_item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.my_list_item_icon {
|
||
width: 52rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.my_list_item_name {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.my_list_item_num {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #e3ad7f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.my_fun {
|
||
.my_item_title {
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.my_fun_list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.my_list_item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0 26rpx 0;
|
||
border-bottom: 1rpx solid #e5e5e5;
|
||
|
||
.my_list_item_left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.my_list_item_icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.my_list_item_name {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.my_list_item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
column-gap: 40rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.card-list-item {
|
||
max-width: 182rpx;
|
||
box-shadow: 8rpx 8rpx 32rpx 0 #0b18390f;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
|
||
.info {
|
||
padding-bottom: 16rpx;
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
.qrcode {
|
||
padding: 24rpx;
|
||
margin: 60rpx 32rpx 60rpx 32rpx;
|
||
border-radius: 18rpx;
|
||
border: 2rpx solid #d9d9d9;
|
||
}
|
||
.qrcode-box {
|
||
position: fixed;
|
||
transform: translateX(200vw, 200vh);
|
||
}
|
||
</style>
|