feat: save
This commit is contained in:
parent
081f583f10
commit
239191fbe3
@ -13,6 +13,7 @@
|
|||||||
<div id="app" v-cloak></div>
|
<div id="app" v-cloak></div>
|
||||||
<script src="/js/echarts.min.js"></script>
|
<script src="/js/echarts.min.js"></script>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||||
<style>
|
<style>
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
BIN
public/img/no.png
Normal file
BIN
public/img/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
public/img/pay_point.png
Normal file
BIN
public/img/pay_point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
53
src/App.vue
53
src/App.vue
@ -14,6 +14,59 @@ export default {
|
|||||||
const routes = this.$router.getRoutes()
|
const routes = this.$router.getRoutes()
|
||||||
return routes.filter(r => r.meta.cache).map(r => r.name)
|
return routes.filter(r => r.meta.cache).map(r => r.name)
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route(to, from) {
|
||||||
|
const title = to.meta.title || ''
|
||||||
|
this.updateTitle(title)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateTitle(title) {
|
||||||
|
document.title = title
|
||||||
|
if (this.$isWechat()) {
|
||||||
|
// 微信安卓需要用 iframe 触发标题更新
|
||||||
|
const iframe = document.createElement('iframe')
|
||||||
|
iframe.style.display = 'none'
|
||||||
|
iframe.src = 'https://www.baidu.com/favicon.ico?' + Date.now()
|
||||||
|
iframe.onload = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(iframe)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
document.body.appendChild(iframe)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateShare(title, desc, imgUrl) {
|
||||||
|
if (wx && this.$isWechat()) {
|
||||||
|
// this.$CommonAPI.Post('GetJSSDKConfig', location.href).then(data => {
|
||||||
|
let shareinfo = {
|
||||||
|
title: title || '泰古润' || this.wechatShareInfo.ShareTitle,
|
||||||
|
desc: desc || '汇聚平凡梦想,共创美好未来' || this.wechatShareInfo.ShareContent,
|
||||||
|
imgUrl: this.$file(imgUrl || this.wechatShareInfo.ShareLogo),
|
||||||
|
link: this.$getShareLink(),
|
||||||
|
};
|
||||||
|
if (this.$isWechatMini())
|
||||||
|
wx.miniProgram.postMessage({ data: { share: shareinfo } });
|
||||||
|
data.jsApiList.push('wx-open-launch-weapp');
|
||||||
|
data.openTagList = ['wx-open-launch-weapp'];
|
||||||
|
wx.config(data);
|
||||||
|
wx.ready(() => {
|
||||||
|
wx.updateAppMessageShareData(shareinfo);
|
||||||
|
wx.updateTimelineShareData(shareinfo);
|
||||||
|
if (location.hash == '#/Weapp') {
|
||||||
|
document.addEventListener('WeixinOpenTagsError', function (e) {
|
||||||
|
alert(e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
wx.error((e) => {
|
||||||
|
if (location.hash == '#/Weapp')
|
||||||
|
alert(JSON.stringify(e));
|
||||||
|
});
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -79,18 +79,6 @@ export default {
|
|||||||
})
|
})
|
||||||
window.addEventListener('scroll', this.onWindowScroll)
|
window.addEventListener('scroll', this.onWindowScroll)
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
|
||||||
this.observer?.disconnect()
|
|
||||||
window.removeEventListener('scroll', this.onWindowScroll)
|
|
||||||
if (this.cacheKey && this.list.length > 0) {
|
|
||||||
sessionStorage.setItem(this.cacheKey, JSON.stringify({
|
|
||||||
list: this.list,
|
|
||||||
page: this.page,
|
|
||||||
finished: this.finished,
|
|
||||||
params: this.params
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
onWindowScroll() {
|
onWindowScroll() {
|
||||||
if (this.finished || this.loading) return
|
if (this.finished || this.loading) return
|
||||||
|
|||||||
@ -55,9 +55,6 @@ const userStore = useUserStore()
|
|||||||
|
|
||||||
// 全局前置守卫
|
// 全局前置守卫
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
if (to.meta.title) {
|
|
||||||
document.title = to.meta.title;
|
|
||||||
}
|
|
||||||
if (to.meta.noLogin) {
|
if (to.meta.noLogin) {
|
||||||
return next();
|
return next();
|
||||||
}
|
}
|
||||||
@ -336,7 +333,7 @@ app.config.globalProperties.$validIdCard = (idCard) => {
|
|||||||
|
|
||||||
app.config.globalProperties.$getShareLink = () => {
|
app.config.globalProperties.$getShareLink = () => {
|
||||||
const query = app.config.globalProperties.$route.query;
|
const query = app.config.globalProperties.$route.query;
|
||||||
const recommend = localStorage.getItem('member_username');
|
const recommend = localStorage.getItem('cellphone');
|
||||||
let link = Object.keys(query).filter(x => x != 'RecommendCode').map(x => {
|
let link = Object.keys(query).filter(x => x != 'RecommendCode').map(x => {
|
||||||
return `${x}=${query[x]}`;
|
return `${x}=${query[x]}`;
|
||||||
}).join('&');
|
}).join('&');
|
||||||
|
|||||||
@ -344,16 +344,3 @@ const routes = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export { routes }
|
export { routes }
|
||||||
|
|
||||||
const router = createRouter({
|
|
||||||
history: createWebHashHistory(),
|
|
||||||
routes,
|
|
||||||
scrollBehavior(to, from, savedPosition) {
|
|
||||||
if (savedPosition) {
|
|
||||||
return savedPosition;
|
|
||||||
}
|
|
||||||
return { top: 0 };
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
|
|||||||
@ -902,6 +902,7 @@ img {
|
|||||||
padding: 0 1.2vw;
|
padding: 0 1.2vw;
|
||||||
border-radius: 1.07vw;
|
border-radius: 1.07vw;
|
||||||
margin-right: 1.2vw;
|
margin-right: 1.2vw;
|
||||||
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.state1 {
|
.state1 {
|
||||||
@ -910,13 +911,16 @@ img {
|
|||||||
|
|
||||||
.state3 {
|
.state3 {
|
||||||
background-color: #ea4747;
|
background-color: #ea4747;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.state4 {
|
.state4 {
|
||||||
background-color: #229427;
|
background-color: #229427;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state5 {
|
||||||
|
background-color: #f9a225;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 3.2vw;
|
width: 3.2vw;
|
||||||
height: 3.2vw;
|
height: 3.2vw;
|
||||||
@ -2138,6 +2142,16 @@ img {
|
|||||||
color: #ea3e23;
|
color: #ea3e23;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.allpoint {
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: #ea3e23;
|
||||||
|
font-size: 4vw;
|
||||||
|
margin-right: 1.2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.oprice {
|
.oprice {
|
||||||
color: #b1b1b1;
|
color: #b1b1b1;
|
||||||
margin-left: 3.87vw;
|
margin-left: 3.87vw;
|
||||||
@ -2180,6 +2194,8 @@ img {
|
|||||||
border: solid 0.27vw #e56f5d;
|
border: solid 0.27vw #e56f5d;
|
||||||
color: #e56f5d;
|
color: #e56f5d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
@ -2221,6 +2237,7 @@ img {
|
|||||||
padding: 0 4vw;
|
padding: 0 4vw;
|
||||||
font-size: 3.73vw;
|
font-size: 3.73vw;
|
||||||
color: #303030;
|
color: #303030;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 3.73vw;
|
width: 3.73vw;
|
||||||
@ -2463,6 +2480,18 @@ img {
|
|||||||
padding-bottom: 3.33vw;
|
padding-bottom: 3.33vw;
|
||||||
border-bottom: 1px #fff solid;
|
border-bottom: 1px #fff solid;
|
||||||
|
|
||||||
|
.allpointp {
|
||||||
|
margin-top: 2.4vw;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 4vw;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ea3e23;
|
||||||
|
margin-right: 1.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.goods_price {
|
.goods_price {
|
||||||
font-size: 4vw;
|
font-size: 4vw;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
@ -15,8 +15,8 @@
|
|||||||
<div class="lg_box">
|
<div class="lg_box">
|
||||||
<!-- 登录方式切换 tabs -->
|
<!-- 登录方式切换 tabs -->
|
||||||
<van-tabs color="#841e36" line-height="1.07vw" line-width="12vw" v-model:active="active" v-if="!isReg">
|
<van-tabs color="#841e36" line-height="1.07vw" line-width="12vw" v-model:active="active" v-if="!isReg">
|
||||||
<van-tab title="账号登录"></van-tab>
|
<van-tab title="手机号快捷登录"></van-tab>
|
||||||
<van-tab title="手机号登录"></van-tab>
|
<van-tab title="账号+密码登录"></van-tab>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
|
|
||||||
<!-- 表单区域 -->
|
<!-- 表单区域 -->
|
||||||
@ -25,14 +25,14 @@
|
|||||||
<div class="line">
|
<div class="line">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="/img/login-i1.png" alt="">
|
<img src="/img/login-i1.png" alt="">
|
||||||
<input type="tel" maxlength="11" :placeholder="active === 1 && !isReg ? '请输入手机号码作为账号' : '请输入手机号'"
|
<input type="tel" maxlength="11" :placeholder="active === 0 && !isReg ? '请输入手机号码作为账号' : '请输入手机号'"
|
||||||
v-model="formData.Phone" />
|
v-model="formData.Phone" />
|
||||||
<van-icon v-if="formData.Phone" @click="formData.Phone = ''" name="cross" size="5vw"></van-icon>
|
<van-icon v-if="formData.Phone" @click="formData.Phone = ''" name="cross" size="5vw"></van-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 验证码 (手机号登录或注册时显示) -->
|
<!-- 验证码 (手机号登录或注册时显示) -->
|
||||||
<div class="line" v-if="active === 1 || isReg">
|
<div class="line" v-if="active === 0 || isReg">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="/img/login-i2.png" alt="">
|
<img src="/img/login-i2.png" alt="">
|
||||||
<input type="text" placeholder="请输入验证码" v-model="formData.SmsCode" maxlength="6" />
|
<input type="text" placeholder="请输入验证码" v-model="formData.SmsCode" maxlength="6" />
|
||||||
@ -43,7 +43,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 密码 (账号登录或注册时显示) -->
|
<!-- 密码 (账号登录或注册时显示) -->
|
||||||
<div class="line" v-if="active === 0 || isReg">
|
<div class="line" v-if="active === 1 || isReg">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="/img/login-i3.png" alt="">
|
<img src="/img/login-i3.png" alt="">
|
||||||
<input :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="formData.Password"
|
<input :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="formData.Password"
|
||||||
@ -228,7 +228,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleLogin() {
|
handleLogin() {
|
||||||
if (this.active === 0) {
|
if (this.active === 1) {
|
||||||
// 账号密码登录
|
// 账号密码登录
|
||||||
if (!this.formData.Password) {
|
if (!this.formData.Password) {
|
||||||
this.$showFailToast?.('请输入密码')
|
this.$showFailToast?.('请输入密码')
|
||||||
@ -352,7 +352,7 @@ export default {
|
|||||||
this.init()
|
this.init()
|
||||||
// 解析邀请链接参数
|
// 解析邀请链接参数
|
||||||
const params = new URLSearchParams(location.hash.split('?')[1] || '');
|
const params = new URLSearchParams(location.hash.split('?')[1] || '');
|
||||||
const inviteCode = params.get('invite');
|
const inviteCode = params.get('RecommendCode') || params.get('invite') || localStorage.getItem('recommend');
|
||||||
if (inviteCode) {
|
if (inviteCode) {
|
||||||
this.formData.Recommend = inviteCode;
|
this.formData.Recommend = inviteCode;
|
||||||
localStorage.setItem('recommend', inviteCode);
|
localStorage.setItem('recommend', inviteCode);
|
||||||
|
|||||||
@ -6,12 +6,12 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
const url = new URL(window.location.href)
|
const url = new URL(window.location.href)
|
||||||
const code = url.searchParams.get('code')
|
const code = url.searchParams.get('code')
|
||||||
const inviteCode = url.searchParams.get('invite')
|
const inviteCode = url.searchParams.get('RecommendCode') || url.searchParams.get('invite') || localStorage.getItem('recommend')
|
||||||
|
|
||||||
if (code) {
|
if (code) {
|
||||||
sessionStorage.setItem('wx_callback_code', code)
|
sessionStorage.setItem('wx_callback_code', code)
|
||||||
// 带上 invite 参数一起跳转,Login mounted 时读取
|
// 带上 invite 参数一起跳转,Login mounted 时读取
|
||||||
this.$router.replace('/Login' + (inviteCode ? `?invite=${inviteCode}` : ''))
|
this.$router.replace('/Login' + (inviteCode ? `?RecommendCode=${inviteCode}` : ''))
|
||||||
} else {
|
} else {
|
||||||
this.$router.replace('/')
|
this.$router.replace('/')
|
||||||
}
|
}
|
||||||
|
|||||||
@ -60,7 +60,7 @@
|
|||||||
<BaseList class="pro-list" ref="productList" :url="`/v1/client/EProsClient`"
|
<BaseList class="pro-list" ref="productList" :url="`/v1/client/EProsClient`"
|
||||||
:params="queryParams" @load="onLoad">
|
:params="queryParams" @load="onLoad">
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<div class="a1" @click="$navigate(`/GoodsDetail?id=${item.id}`)">
|
<div class="a1" @click="$navigate('/GoodsDetail?id=' + item.id)">
|
||||||
<img :src="$file(item.img)" />
|
<img :src="$file(item.img)" />
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<div class="name">{{ item.name }}</div>
|
<div class="name">{{ item.name }}</div>
|
||||||
@ -97,9 +97,6 @@ import BaseList from '../../components/BaseList.vue';
|
|||||||
export default {
|
export default {
|
||||||
name: 'Category',
|
name: 'Category',
|
||||||
components: { BaseList },
|
components: { BaseList },
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showMainCategory: false,
|
showMainCategory: false,
|
||||||
@ -107,7 +104,6 @@ export default {
|
|||||||
searchKey: '',
|
searchKey: '',
|
||||||
secondCategory: '',
|
secondCategory: '',
|
||||||
goodsCategoryIndex: 0,
|
goodsCategoryIndex: 0,
|
||||||
// 分类数据
|
|
||||||
allCategories: [],
|
allCategories: [],
|
||||||
firstCategories: [],
|
firstCategories: [],
|
||||||
secondCategories: [],
|
secondCategories: [],
|
||||||
@ -115,7 +111,6 @@ export default {
|
|||||||
selectedSecond: [],
|
selectedSecond: [],
|
||||||
selectedThird: [],
|
selectedThird: [],
|
||||||
mainCategory: '',
|
mainCategory: '',
|
||||||
// 当前选中的三级分类
|
|
||||||
currentThirdId: '',
|
currentThirdId: '',
|
||||||
searchParams: {
|
searchParams: {
|
||||||
SortType: 0,
|
SortType: 0,
|
||||||
@ -124,6 +119,7 @@ export default {
|
|||||||
queryParams: {
|
queryParams: {
|
||||||
mallstate: 3,
|
mallstate: 3,
|
||||||
pid: '',
|
pid: '',
|
||||||
|
name: '',
|
||||||
},
|
},
|
||||||
imageSources: [
|
imageSources: [
|
||||||
"/img/pro-list-px-0.png",
|
"/img/pro-list-px-0.png",
|
||||||
@ -132,6 +128,18 @@ export default {
|
|||||||
],
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
beforeRouteLeave(to, from, next) {
|
||||||
|
sessionStorage.setItem('category_scroll', window.scrollY)
|
||||||
|
next()
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
sessionStorage.setItem('category_scroll', window.scrollY)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async init() {
|
async init() {
|
||||||
await this.loadCategories();
|
await this.loadCategories();
|
||||||
@ -143,6 +151,11 @@ export default {
|
|||||||
this.searchParams.SortType = 2;
|
this.searchParams.SortType = 2;
|
||||||
this.searchParams.IsDesc = true;
|
this.searchParams.IsDesc = true;
|
||||||
}
|
}
|
||||||
|
// 如果URL带有name参数,初始化搜索
|
||||||
|
if (this.$route.query.name) {
|
||||||
|
this.searchKey = this.$route.query.name;
|
||||||
|
this.queryParams.name = this.searchKey;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async loadCategories() {
|
async loadCategories() {
|
||||||
try {
|
try {
|
||||||
@ -234,6 +247,7 @@ export default {
|
|||||||
this.refreshProductList();
|
this.refreshProductList();
|
||||||
},
|
},
|
||||||
onSearch() {
|
onSearch() {
|
||||||
|
this.queryParams.name = this.searchKey;
|
||||||
this.refreshProductList();
|
this.refreshProductList();
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasePage :title="data.name || '产品详情'">
|
<BasePage :title="data.name || '产品详情'" :back="back">
|
||||||
<div class="goodsdetails">
|
<div class="goodsdetails">
|
||||||
<div class="t">
|
<div class="t">
|
||||||
<img :src="$file(data.img)" alt="">
|
<img :src="$file(data.img)" alt="">
|
||||||
@ -17,24 +17,27 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="price_box">
|
<div class="price_box">
|
||||||
<div class="price">
|
<div class="price" v-if="data.mallstate !== 5">
|
||||||
¥{{ data.saleprice?.toFixed(2) }}
|
¥{{ data.saleprice?.toFixed(2) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="oprice">
|
<div class="oprice" v-if="data.mallstate !== 5">
|
||||||
¥{{ data.originalprice?.toFixed(2) }}
|
¥{{ data.originalprice?.toFixed(2) }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="allpoint" v-if="data.mallstate === 5">
|
||||||
|
<b>{{ data.saleprice?.toFixed(2) || '0.00' }}</b>积分
|
||||||
|
</div>
|
||||||
<div class="sales r">
|
<div class="sales r">
|
||||||
已售{{ data.salenums }}
|
已售{{ data.salenums }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="deduct_box">
|
<div class="deduct_box">
|
||||||
<div class="point">
|
<div class="point" v-if="data.deductjifen > 0">
|
||||||
<img src="/img/de-i1.png" alt="">
|
<img src="/img/de-i1.png" alt="">
|
||||||
积分抵¥{{ data.deductjifen?.toFixed(2) || '0.00' }}
|
积分抵¥{{ data.deductjifen?.toFixed(2) || '0.00' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vip">
|
<div class="vip" v-if="data.deducthuiyuanka > 0">
|
||||||
<img src="/img/de-i2.png" alt="">
|
<img src="/img/de-i2.png" alt="">
|
||||||
会员卡额度抵¥{{ data.deducthuiyuanka?.toFixed(2) || '0.00' }}
|
会员卡额度抵¥{{ data.deducthuiyuanka?.toFixed(2) || '0.00' }}
|
||||||
</div>
|
</div>
|
||||||
@ -58,6 +61,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="spec_box" @click="showArea = true">
|
||||||
|
<img src="/img/spec.png" alt="">
|
||||||
|
<span>不支持发货区域:</span>
|
||||||
|
<span
|
||||||
|
style="color: #999999;max-width: 43vw;width: 43vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
|
||||||
|
{{ formattedForbidArea }}
|
||||||
|
</span>
|
||||||
|
<van-icon class="r" name="arrow"></van-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="spec_box" @click="showSpecs = true">
|
<div class="spec_box" @click="showSpecs = true">
|
||||||
<img src="/img/spec.png" alt="">
|
<img src="/img/spec.png" alt="">
|
||||||
<span>{{ selectedSku }}</span>
|
<span>{{ selectedSku }}</span>
|
||||||
@ -136,8 +149,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="price">
|
<div class="price">
|
||||||
<div class="goods_price">¥{{ data.saleprice?.toFixed(2) || '0.00' }}</div>
|
<div class="allpointp" v-if="data.mallstate === 5">
|
||||||
<div class="o_price">¥{{ data.originalprice?.toFixed(2) || '0.00' }}</div>
|
<span>{{ data.saleprice?.toFixed(2) || '0.00' }}</span>积分
|
||||||
|
</div>
|
||||||
|
<div class="goods_price" v-else>¥{{ data.saleprice?.toFixed(2) || '0.00' }}</div>
|
||||||
|
<div class="o_price" v-if="data.mallstate !== 5">¥{{ data.originalprice?.toFixed(2) || '0.00' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bottom_box">
|
<div class="bottom_box">
|
||||||
@ -155,6 +171,29 @@
|
|||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
|
|
||||||
|
<van-popup v-model:show="showArea" safe-area-inset-bottom
|
||||||
|
style=" width: 86.67vw; background-color: #fff7f7; border-radius: 2.67vw;overflow: visible;" class="area_popup"
|
||||||
|
@click.self="showArea = false">
|
||||||
|
<div class="area_box" style="position: relative;">
|
||||||
|
<img style="width:31.73vw;position: absolute;top: -16vw;z-index: 1;left: 50%;transform: translateX(-50%);"
|
||||||
|
src="/img/no.png" alt="">
|
||||||
|
<div
|
||||||
|
style="font-size: 3.73vw;color: #333333;padding:18vw 3.33vw 3.33vw;display: flex;flex-direction: column;align-items: center;justify-content:center;border-bottom: 1px solid #f5f5f5;">
|
||||||
|
<span style="">
|
||||||
|
不支持发货区域:
|
||||||
|
<span style="font-size: 3.73vw;;color: #ea3e23;">
|
||||||
|
{{ formattedForbidArea }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button @click="showArea = false"
|
||||||
|
style="height: 16vw;width:100%;border:none;background-color: transparent; font-size: 3.73vw;font-weight: bold;color:#333;">
|
||||||
|
好的,知道了
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</BasePage>
|
</BasePage>
|
||||||
@ -175,6 +214,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
data: {},
|
data: {},
|
||||||
specSelect: [],
|
specSelect: [],
|
||||||
|
hide: true,
|
||||||
|
showArea: false,
|
||||||
show: false,
|
show: false,
|
||||||
specCombinations: [],
|
specCombinations: [],
|
||||||
tempSku: {},
|
tempSku: {},
|
||||||
@ -192,13 +233,26 @@ export default {
|
|||||||
shareBoxHidden: false
|
shareBoxHidden: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
formattedForbidArea() {
|
||||||
|
if (!this.data.forbidbuyarea) return '暂无'
|
||||||
|
try {
|
||||||
|
// 去掉转义的反斜杠
|
||||||
|
const str = this.data.forbidbuyarea.replace(/\\"/g, '"')
|
||||||
|
const arr = JSON.parse(str)
|
||||||
|
return arr.map(s => s.split('-')[1] || s).join('、')
|
||||||
|
} catch {
|
||||||
|
return this.data.forbidbuyarea.replace(/\\"/g, '"')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
this.$get(`/v1/client/EProsClient/${this.$route.query.id}`).then(res => {
|
this.$get(`/v1/client/EProsClient/${this.$route.query.id}`).then(res => {
|
||||||
this.data = res.data;
|
this.data = res.data;
|
||||||
this.specSelect = this.data.specSelect || [];
|
this.specSelect = this.data.specSelect || [];
|
||||||
this.specCombinations = this.data.specCombinations || [];
|
this.specCombinations = this.data.specCombinations || [];
|
||||||
const recommend = localStorage.getItem('member_username') || '';
|
const recommend = localStorage.getItem('cellphone') || '';
|
||||||
this.shareLink = `${location.origin}/#/GoodsDetail?id=${this.data.id}${recommend ? '&RecommendCode=' + recommend : ''}`;
|
this.shareLink = `${location.origin}/#/GoodsDetail?id=${this.data.id}${recommend ? '&RecommendCode=' + recommend : ''}`;
|
||||||
this.$emit('updateShare', { title: this.data.name, imageUrl: this.data.img, link: this.shareLink });
|
this.$emit('updateShare', { title: this.data.name, imageUrl: this.data.img, link: this.shareLink });
|
||||||
this.initDefaultSku();
|
this.initDefaultSku();
|
||||||
@ -209,12 +263,15 @@ export default {
|
|||||||
if (mainSku) {
|
if (mainSku) {
|
||||||
this.tempSku = { ...mainSku, Qty: 1 };
|
this.tempSku = { ...mainSku, Qty: 1 };
|
||||||
this.selectedSku = "已选:" + mainSku.skuname;
|
this.selectedSku = "已选:" + mainSku.skuname;
|
||||||
// 根据skuname设置默认选中规格
|
// 根据skuname设置默认选中规格,拆分规格名匹配对应分类
|
||||||
this.specSelect.forEach(spec => {
|
const skuParts = mainSku.skuname.split('-').filter(Boolean);
|
||||||
const child = spec.children?.find(c => mainSku.skuname.includes(c.name));
|
this.specSelect.forEach((spec, specIndex) => {
|
||||||
|
if (skuParts[specIndex]) {
|
||||||
|
const child = spec.children?.find(c => skuParts[specIndex].includes(c.name));
|
||||||
if (child) {
|
if (child) {
|
||||||
this.selectedSpecs[spec.name] = child.name;
|
this.selectedSpecs[spec.name] = child.name;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -227,8 +284,10 @@ export default {
|
|||||||
if (specKeys.length === 0) return;
|
if (specKeys.length === 0) return;
|
||||||
|
|
||||||
let matchedSku = this.specCombinations.find(combo => {
|
let matchedSku = this.specCombinations.find(combo => {
|
||||||
return specKeys.every(key => {
|
const skuParts = combo.skuname.split('-').filter(Boolean);
|
||||||
return combo.skuname.includes(this.selectedSpecs[key]);
|
return specKeys.every((key, specIndex) => {
|
||||||
|
const selectedVal = this.selectedSpecs[key];
|
||||||
|
return skuParts[specIndex]?.includes(selectedVal);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -237,6 +296,9 @@ export default {
|
|||||||
this.selectedSku = "已选:" + matchedSku.skuname;
|
this.selectedSku = "已选:" + matchedSku.skuname;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
back() {
|
||||||
|
window.history.back();
|
||||||
|
},
|
||||||
onSelect(option) {
|
onSelect(option) {
|
||||||
this.showShare = false;
|
this.showShare = false;
|
||||||
if (option.name === "分享海报") {
|
if (option.name === "分享海报") {
|
||||||
@ -269,7 +331,7 @@ export default {
|
|||||||
this.$showFailToast("该规格库存不足,无法购买");
|
this.$showFailToast("该规格库存不足,无法购买");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$navigate(`/TradeConfirm?id=${this.data.id}&buynums=${this.tempSku.Qty}`);
|
this.$navigate(`/TradeConfirm?id=${this.data.id}&skuid=${this.tempSku.skuid}&buynums=${this.tempSku.Qty}`);
|
||||||
},
|
},
|
||||||
beforeShare() {
|
beforeShare() {
|
||||||
this.showShare = true;
|
this.showShare = true;
|
||||||
|
|||||||
@ -68,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<b>¥{{ order.discount }}</b>
|
<b>¥{{ order.discount }}</b>
|
||||||
<span>让利金额</span>
|
<span>惠利金额</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="red">
|
<div class="red">
|
||||||
<b>¥{{ order.income }}</b>
|
<b>¥{{ order.income }}</b>
|
||||||
|
|||||||
@ -54,14 +54,14 @@
|
|||||||
<p>¥{{ data.paymoney?.toFixed(2) }}</p>
|
<p>¥{{ data.paymoney?.toFixed(2) }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail" v-if="data.discountratio">
|
<div class="detail" v-if="data.discountratio">
|
||||||
<span>商家让利比例:</span>
|
<span>商家惠利比例:</span>
|
||||||
<p>{{ data.discountratio }}%</p>
|
<p>{{ data.discountratio }}%</p>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
<span>商家让利金额:</span>
|
<span>商家惠利金额:</span>
|
||||||
<p>-¥{{ data.discount }}</p>
|
<p>-¥{{ data.discount }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail">
|
<div class="detail">
|
||||||
@ -118,7 +118,7 @@
|
|||||||
<p class="red">¥{{ data.paymoney?.toFixed(2) }}</p>
|
<p class="red">¥{{ data.paymoney?.toFixed(2) }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail" v-if="data.discountratio">
|
<div class="detail" v-if="data.discountratio">
|
||||||
<span>让利比例:</span>
|
<span>惠利比例:</span>
|
||||||
<p>{{ data.discountratio }}%</p>
|
<p>{{ data.discountratio }}%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,17 +31,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const cacheKey = `ColumnDetail_${this.id}`
|
|
||||||
const cached = sessionStorage.getItem(cacheKey)
|
|
||||||
if (cached) {
|
|
||||||
try {
|
|
||||||
this.article = JSON.parse(cached)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.setupImagePreview();
|
|
||||||
});
|
|
||||||
return
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
|
||||||
this.getDetail(this.id);
|
this.getDetail(this.id);
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.setupImagePreview();
|
this.setupImagePreview();
|
||||||
@ -49,9 +38,16 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDetail(id) {
|
getDetail(id) {
|
||||||
|
if (id === '1') {
|
||||||
|
this.$get('/v1/client/CNewscatesClient/1').then(res => {
|
||||||
|
this.article = res.data;
|
||||||
|
}).catch(err => {
|
||||||
|
this.$showFailToast(err.message);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.$get(`/v1/client/CNewsClient/${id}`).then(data => {
|
this.$get(`/v1/client/CNewsClient/${id}`).then(data => {
|
||||||
this.article = data.data;
|
this.article = data.data;
|
||||||
sessionStorage.setItem(`ColumnDetail_${id}`, JSON.stringify(data.data))
|
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
this.$showFailToast(err.message);
|
this.$showFailToast(err.message);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="search_box">
|
<div class="search_box">
|
||||||
<img src="/img/search.png" alt="">
|
<img src="/img/search.png" alt="">
|
||||||
<input v-model="searchParams.Key" placeholder="请输入关键词搜索"
|
<input v-model="searchParams.name" placeholder="请输入关键词搜索"
|
||||||
@search="$navigate('Category?Key=' + searchParams.Key)">
|
@search="$navigate('Category?name=' + searchParams.name)">
|
||||||
<button @click="$navigate('Category?Key=' + searchParams.Key)" :style="btnStyle">搜索</button>
|
<button @click="$navigate('Category?name=' + searchParams.name)" :style="btnStyle">搜索</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<van-swipe :autoplay="3000" indicator-color="white" @change="onSwipeChange">
|
<van-swipe :autoplay="3000" indicator-color="white" @change="onSwipeChange">
|
||||||
@ -138,12 +138,6 @@
|
|||||||
<span class="title">
|
<span class="title">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</span>
|
</span>
|
||||||
<!-- <div class="zeng_box">
|
|
||||||
<span>赠</span>
|
|
||||||
<div>
|
|
||||||
{{ item.gongxianzhi }}贡献值
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<span class="oldprice">
|
<span class="oldprice">
|
||||||
¥{{ item.originalprice.toFixed(2) }}
|
¥{{ item.originalprice.toFixed(2) }}
|
||||||
</span>
|
</span>
|
||||||
@ -152,8 +146,6 @@
|
|||||||
<span class="money">¥</span>
|
<span class="money">¥</span>
|
||||||
<span v-html="$toMoney(item.saleprice, 'b')"></span>
|
<span v-html="$toMoney(item.saleprice, 'b')"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <img style="width:5.6vw;height: 5.07vw;margin-bottom: 0;" class="r" src="/img/cart.png" alt=""> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -206,7 +198,7 @@ export default {
|
|||||||
searchParams: {
|
searchParams: {
|
||||||
mallstate: 3,
|
mallstate: 3,
|
||||||
pid: '',
|
pid: '',
|
||||||
Key: '',
|
name: '',
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
Carousel: [],
|
Carousel: [],
|
||||||
@ -215,17 +207,19 @@ export default {
|
|||||||
hotData: [],
|
hotData: [],
|
||||||
typeData: [],
|
typeData: [],
|
||||||
bgcolor: '',
|
bgcolor: '',
|
||||||
|
_fromDetail: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
activated() {
|
deactivated() {
|
||||||
this.$refs.BaseList?.refresh()
|
sessionStorage.setItem('mall_scroll', window.scrollY)
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
|
activated() {
|
||||||
|
this.$refs.BaseList?.refresh()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
@ -265,7 +259,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onClear() {
|
onClear() {
|
||||||
this.searchParams.Key = ''
|
this.searchParams.name = ''
|
||||||
this.$refs.BaseList?.refresh()
|
this.$refs.BaseList?.refresh()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -17,58 +17,28 @@
|
|||||||
<van-tabs style="max-width: 90%;" background="transparent" line-height="0.8vw" line-width="9.33vw;"
|
<van-tabs style="max-width: 90%;" background="transparent" line-height="0.8vw" line-width="9.33vw;"
|
||||||
v-model:active="active" :ellipsis="false" color="#ca2904" title-active-color="#ca2904"
|
v-model:active="active" :ellipsis="false" color="#ca2904" title-active-color="#ca2904"
|
||||||
title-inactive-color="#4e4e4e">
|
title-inactive-color="#4e4e4e">
|
||||||
<van-tab title="新品" name=""></van-tab>
|
<van-tab title="全部" name=""></van-tab>
|
||||||
<van-tab v-for="i in tabs" :name="i.id" :title="i.name"></van-tab>
|
<van-tab v-for="i in tabs" :name="i.id" :title="i.name"></van-tab>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
<img @click="showLeft = true" class="filter_img" style="width: 5.4vw;" src="/img/filter.png" alt="">
|
<!-- <img @click="showLeft = true" class="filter_img" style="width: 5.4vw;" src="/img/filter.png" alt=""> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <BaseList url="/v1/client/EProsClient" class="goods_list" :params="{ mallstate: 2, pid: active }">
|
<BaseList url="/v1/client/EProsClient" class="goods_list" :params="{ mallstate: 5, pid: active }">
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
<div class="goods_item" :key="item.id" @click="toDetail(item.id)">
|
<div class="goods_item" :key="item.id" @click="toDetail(item.id)">
|
||||||
<img :src="$file(item.img)" alt="">
|
<img :src="$file(item.img)" alt="">
|
||||||
<div>
|
<div>
|
||||||
<span class="title">{{ item.name }}</span>
|
<span class="title">{{ item.name }}</span>
|
||||||
<p>¥{{ item.originalprice }}</p>
|
|
||||||
<div class="money">
|
<div class="money">
|
||||||
<div>
|
<div>
|
||||||
<span>¥
|
<b>{{ item.jifen?.toFixed(2) }}</b>积分
|
||||||
<b>{{ item.saleprice }}</b>.00
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img class="r" style="width: 5.6vw;" src="/img/cart.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</BaseList> -->
|
</BaseList>
|
||||||
|
|
||||||
|
|
||||||
<div class="goods_list">
|
|
||||||
<div class="goods_item" v-for="item in goods" :key="item.id" @click="toDetail(item.id)">
|
|
||||||
<img :src="item.Icon" alt="">
|
|
||||||
<div>
|
|
||||||
<span class="title">{{ item.SubTitle }}</span>
|
|
||||||
<div class="point_box">
|
|
||||||
<img style="width: 3.33vw;height: 3.2vw;" src="/img/point.png" alt="">
|
|
||||||
<span style="font-size: 3.2vw; color: #d9a452;">积分可抵¥500.00</span>
|
|
||||||
</div>
|
|
||||||
<!-- <p>¥{{ item.OPrice }}</p> -->
|
|
||||||
<div class="money">
|
|
||||||
<div>
|
|
||||||
<span>¥</span>
|
|
||||||
<b>{{ item.Price }}</b>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="oprice">
|
|
||||||
¥{{ item.OPrice }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -123,7 +93,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getTab() {
|
getTab() {
|
||||||
this.$get('/v1/client/EProcatesClient/2').then(res => {
|
this.$get('/v1/client/EProcatesClient/5').then(res => {
|
||||||
this.tabs = res.data
|
this.tabs = res.data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -181,7 +151,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0 5vw;
|
/* padding: 0 8vw 0 0; */
|
||||||
margin-top: 4vw;
|
margin-top: 4vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -190,7 +160,6 @@ export default {
|
|||||||
height: 5.4vw;
|
height: 5.4vw;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 5vw;
|
right: 5vw;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -233,7 +202,7 @@ export default {
|
|||||||
line-height: 4vw;
|
line-height: 4vw;
|
||||||
height: 8vw;
|
height: 8vw;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 3.2vw;
|
margin-bottom: 2.93vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.point_box {
|
.point_box {
|
||||||
@ -263,24 +232,13 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #ea3e23;
|
color: #333;
|
||||||
|
font-size: 3.2vw;
|
||||||
span {
|
|
||||||
color: #ca2904;
|
|
||||||
text-decoration: line-through;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
b {
|
b {
|
||||||
font-size: 4vw;
|
font-size: 4vw;
|
||||||
color: #ea3e23;
|
color: #ea3e23;
|
||||||
text-decoration: none !important;
|
margin-right: 1.2vw;
|
||||||
}
|
|
||||||
|
|
||||||
.oprice {
|
|
||||||
font-size: 3.2vw;
|
|
||||||
color: #b1b1b1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,16 +2,17 @@
|
|||||||
<BasePage :back="back" title="订单支付">
|
<BasePage :back="back" title="订单支付">
|
||||||
<div class="pay">
|
<div class="pay">
|
||||||
<div class="amount">
|
<div class="amount">
|
||||||
<span>¥</span>{{ orderInfo.needpay }}
|
<span>¥</span>{{ orderInfo.needpay || orderInfo.payjifen }}
|
||||||
</div>
|
</div>
|
||||||
<div class="trade-code">
|
<div class="trade-code">
|
||||||
订单号:{{ orderInfo.ordernum }}
|
订单号:{{ orderInfo.ordernum }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<van-cell-group class="pay-method" inset>
|
<van-cell-group class="pay-method" inset>
|
||||||
<van-checkbox-group v-model="payMethod" disabled>
|
<van-checkbox-group v-model="payMethod">
|
||||||
<!-- 余额支付 -->
|
<!-- 余额支付 -->
|
||||||
<van-cell class="balance-pay" title="余额支付" is-link @click="payMethod = ['balance']">
|
<van-cell class="balance-pay" title="余额支付" is-link @click="payMethod = ['balance']"
|
||||||
|
v-if="orderInfo.mallstate !== 5">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<img class="pay-icon" src="/img/pay_balance.png" />
|
<img class="pay-icon" src="/img/pay_balance.png" />
|
||||||
</template>
|
</template>
|
||||||
@ -24,7 +25,7 @@
|
|||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<!-- 支付宝支付 -->
|
<!-- 支付宝支付 -->
|
||||||
<van-cell title="支付宝支付" is-link @click="payMethod = ['alipay']">
|
<van-cell title="支付宝支付" is-link @click="payMethod = ['alipay']" v-if="orderInfo.mallstate !== 5">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<img class="pay-icon" src="/img/pay_alipay.png" />
|
<img class="pay-icon" src="/img/pay_alipay.png" />
|
||||||
</template>
|
</template>
|
||||||
@ -34,7 +35,7 @@
|
|||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<!-- 微信支付 -->
|
<!-- 微信支付 -->
|
||||||
<van-cell title="微信支付" is-link @click="payMethod = ['wechat']">
|
<van-cell title="微信支付" is-link @click="payMethod = ['wechat']" v-if="orderInfo.mallstate !== 5">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<img class="pay-icon" src="/img/pay_weixin.png" />
|
<img class="pay-icon" src="/img/pay_weixin.png" />
|
||||||
</template>
|
</template>
|
||||||
@ -43,7 +44,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
<van-cell v-if="!hide" title="快捷支付HJ(更顺畅)" is-link @click="payMethod = ['bankcard']">
|
<van-cell v-if="!hide && orderInfo.mallstate !== 5" title="快捷支付HJ(更顺畅)" is-link
|
||||||
|
@click="payMethod = ['bankcard']">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<img class="pay-icon" src="/img/pay_bankcard.png" />
|
<img class="pay-icon" src="/img/pay_bankcard.png" />
|
||||||
</template>
|
</template>
|
||||||
@ -51,6 +53,15 @@
|
|||||||
<van-checkbox name="bankcard" :class="{ selected: payMethod.includes('bankcard') }" />
|
<van-checkbox name="bankcard" :class="{ selected: payMethod.includes('bankcard') }" />
|
||||||
</template>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
|
<van-cell v-if="orderInfo.mallstate === 5" title="积分支付" is-link @click="payMethod = ['point']">
|
||||||
|
<template #icon>
|
||||||
|
<img class="pay-icon" src="/img/pay_point.png" />
|
||||||
|
</template>
|
||||||
|
<template #right-icon>
|
||||||
|
<van-checkbox name="point" :class="{ selected: payMethod.includes('point') }" />
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
</van-checkbox-group>
|
</van-checkbox-group>
|
||||||
|
|
||||||
<van-button type="primary" size="large" round="" style="width: 100%;margin-top: 6.67vw;"
|
<van-button type="primary" size="large" round="" style="width: 100%;margin-top: 6.67vw;"
|
||||||
@ -87,7 +98,7 @@ export default {
|
|||||||
wallet: {
|
wallet: {
|
||||||
totalsum: 0,
|
totalsum: 0,
|
||||||
},
|
},
|
||||||
payMethod: ['balance'],
|
payMethod: [],
|
||||||
showPayResult: false,
|
showPayResult: false,
|
||||||
paychannelList: [],
|
paychannelList: [],
|
||||||
}
|
}
|
||||||
@ -114,6 +125,13 @@ export default {
|
|||||||
const orderRes = await this.$get(`/v1/client/FOrdersClient/${this.ordernum}`);
|
const orderRes = await this.$get(`/v1/client/FOrdersClient/${this.ordernum}`);
|
||||||
this.orderInfo = orderRes.data;
|
this.orderInfo = orderRes.data;
|
||||||
|
|
||||||
|
// 根据订单状态设置默认支付方式
|
||||||
|
if (this.orderInfo.mallstate === 5) {
|
||||||
|
this.payMethod = ['point'];
|
||||||
|
} else {
|
||||||
|
this.payMethod = ['balance'];
|
||||||
|
}
|
||||||
|
|
||||||
// 获取钱包余额
|
// 获取钱包余额
|
||||||
const walletRes = await this.$get('/v1/client/DUsermoneysClient/statistics');
|
const walletRes = await this.$get('/v1/client/DUsermoneysClient/statistics');
|
||||||
this.wallet = walletRes.data;
|
this.wallet = walletRes.data;
|
||||||
@ -128,7 +146,8 @@ export default {
|
|||||||
balance: 4,
|
balance: 4,
|
||||||
alipay: 2,
|
alipay: 2,
|
||||||
wechat: 1,
|
wechat: 1,
|
||||||
bankcard: 3
|
bankcard: 3,
|
||||||
|
point: 5,
|
||||||
};
|
};
|
||||||
const paychannel = channelMap[method];
|
const paychannel = channelMap[method];
|
||||||
const openid = localStorage.getItem('openid') || '';
|
const openid = localStorage.getItem('openid') || '';
|
||||||
@ -142,7 +161,7 @@ export default {
|
|||||||
if (method === 'wechat') {
|
if (method === 'wechat') {
|
||||||
// 微信支付使用 WeixinJSBridge 调起
|
// 微信支付使用 WeixinJSBridge 调起
|
||||||
this.callWechatPay(res.data);
|
this.callWechatPay(res.data);
|
||||||
} else if (method === 'balance') {
|
} else if (method === 'balance' || method === 'point') {
|
||||||
// 余额支付成功,不显示弹窗
|
// 余额支付成功,不显示弹窗
|
||||||
this.$showSuccessToast(res.message || '支付成功');
|
this.$showSuccessToast(res.message || '支付成功');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
@ -26,7 +26,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<p>{{ product.typename }}订单</p>
|
<p>{{ product.typename }}订单</p>
|
||||||
|
|
||||||
<b class="r"><span>¥</span>{{ product.saleprice?.toFixed(2) }}</b>
|
<b class="r" v-if="product.mallstate !== 5"><span>¥</span>{{ product.saleprice?.toFixed(2)
|
||||||
|
}}</b>
|
||||||
|
<b class="r" v-else><span>{{ product.saleprice?.toFixed(2) }}</span>积分</b>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>规格:{{ product.skuname }}</p>
|
<p>规格:{{ product.skuname }}</p>
|
||||||
@ -36,16 +39,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="payway">
|
<div class="payway" v-if="product.mallstate !== 5">
|
||||||
<div class="deduction">
|
<div class="deduction">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<span>商品金额</span>
|
<span>商品金额</span>
|
||||||
<b class="r"><span>¥</span>{{ totalPrice }}</b>
|
<b class="r"><span>¥</span>{{ totalPrice }}</b>
|
||||||
</div>
|
</div>
|
||||||
<van-radio-group v-model="checked" checked-color="#ca2904">
|
<div class="radio-group">
|
||||||
<van-radio name="1" label-position="left">
|
<div class="way" :class="{ active: checked === '1' }" @click="toggleRadio('1')">
|
||||||
<template #default>
|
<div class="radio-content">
|
||||||
<div class="way">
|
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<img src="/img/point_icon.png" alt="">
|
<img src="/img/point_icon.png" alt="">
|
||||||
<span>使用积分抵扣</span>
|
<span>使用积分抵扣</span>
|
||||||
@ -55,11 +57,12 @@
|
|||||||
actualJifenDeduct?.toFixed(2) }})
|
actualJifenDeduct?.toFixed(2) }})
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="radio-icon">
|
||||||
</van-radio>
|
<van-icon v-if="checked === '1'" name="success" />
|
||||||
<van-radio name="2" label-position="left">
|
</div>
|
||||||
<template #default>
|
</div>
|
||||||
<div class="way">
|
<div class="way" :class="{ active: checked === '2' }" @click="toggleRadio('2')">
|
||||||
|
<div class="radio-content">
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<img src="/img/vip_icon.png" alt="">
|
<img src="/img/vip_icon.png" alt="">
|
||||||
<span>使用会员卡抵扣</span>
|
<span>使用会员卡抵扣</span>
|
||||||
@ -69,9 +72,12 @@
|
|||||||
actualQuanDeduct?.toFixed(2) }})
|
actualQuanDeduct?.toFixed(2) }})
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</van-radio>
|
<div class="radio-icon">
|
||||||
</van-radio-group>
|
<van-icon v-if="checked === '2'" name="success" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="count">
|
<div class="count">
|
||||||
<div v-if="freight > 0">
|
<div v-if="freight > 0">
|
||||||
<span>运费</span>
|
<span>运费</span>
|
||||||
@ -97,7 +103,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<van-submit-bar class="b_l_w" placeholder :price="actualPay * 100" :tip="`商品总数:${totalQuantity}件`"
|
<van-submit-bar class="b_l_w" placeholder :price="actualPay * 100" :tip="`商品总数:${totalQuantity}件`"
|
||||||
tip-icon="info-o" safe-area-inset-bottom>
|
tip-icon="info-o" safe-area-inset-bottom :currency="product.mallstate === 5 ? '' : '¥'">
|
||||||
<template #button>
|
<template #button>
|
||||||
<van-button round color="rgb(227, 83, 33)" :loading="isloading" @click="submitOrder"
|
<van-button round color="rgb(227, 83, 33)" :loading="isloading" @click="submitOrder"
|
||||||
style="height: 10vw;">
|
style="height: 10vw;">
|
||||||
@ -117,6 +123,7 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.loadProduct();
|
this.loadProduct();
|
||||||
this.loadUserInfo();
|
this.loadUserInfo();
|
||||||
|
this.loadDefaultAddress();
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -130,6 +137,7 @@ export default {
|
|||||||
isloading: false,
|
isloading: false,
|
||||||
checked: '',
|
checked: '',
|
||||||
userInfo: {},
|
userInfo: {},
|
||||||
|
_lastChecked: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -206,7 +214,8 @@ export default {
|
|||||||
typename: data.typename || '商品',
|
typename: data.typename || '商品',
|
||||||
expressprice: data.expressprice || 0,
|
expressprice: data.expressprice || 0,
|
||||||
deductjifen: data.deductjifen || 0,
|
deductjifen: data.deductjifen || 0,
|
||||||
deducthuiyuanka: data.deducthuiyuanka || 0
|
deducthuiyuanka: data.deducthuiyuanka || 0,
|
||||||
|
mallstate: data.mallstate || 0,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -215,9 +224,41 @@ export default {
|
|||||||
this.userInfo = res.data;
|
this.userInfo = res.data;
|
||||||
}).catch(() => { });
|
}).catch(() => { });
|
||||||
},
|
},
|
||||||
|
loadDefaultAddress() {
|
||||||
|
this.$get('/v1/client/DUseraddressClient').then(res => {
|
||||||
|
const list = res.data || [];
|
||||||
|
const defaultAddr = list.find(item => item.defaulted);
|
||||||
|
if (defaultAddr) {
|
||||||
|
this.address = {
|
||||||
|
ReceiveName: defaultAddr.name,
|
||||||
|
ReceivePhone: defaultAddr.phone,
|
||||||
|
ReceiveRegionName: defaultAddr.province + defaultAddr.city + defaultAddr.county,
|
||||||
|
ReceiveAddress: defaultAddr.address,
|
||||||
|
province: defaultAddr.province,
|
||||||
|
city: defaultAddr.city,
|
||||||
|
county: defaultAddr.county,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}).catch(() => { });
|
||||||
|
},
|
||||||
onAddressConfirm(addr) {
|
onAddressConfirm(addr) {
|
||||||
this.address = addr;
|
this.address = addr;
|
||||||
},
|
},
|
||||||
|
toggleRadio(name) {
|
||||||
|
if (this.checked === name) {
|
||||||
|
this.checked = '';
|
||||||
|
} else {
|
||||||
|
this.checked = name;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onRadioChange(val) {
|
||||||
|
if (this._lastChecked === val) {
|
||||||
|
this.checked = '';
|
||||||
|
this._lastChecked = '';
|
||||||
|
} else {
|
||||||
|
this._lastChecked = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
submitOrder() {
|
submitOrder() {
|
||||||
if (!this.address.ReceiveName) {
|
if (!this.address.ReceiveName) {
|
||||||
this.$showFailToast("请选择收货地址!");
|
this.$showFailToast("请选择收货地址!");
|
||||||
@ -253,3 +294,58 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.way {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 2.53vw;
|
||||||
|
/* border: 1px solid #eee; */
|
||||||
|
border-radius: 8px;
|
||||||
|
flex-direction: row !important;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .way.active {
|
||||||
|
border-color: #ca2904;
|
||||||
|
background: #fef8f7;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.radio-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #ca2904;
|
||||||
|
font-size: 4.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.way.active .radio-icon {
|
||||||
|
border-color: #ca2904;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line img {
|
||||||
|
width: 3.33vw;
|
||||||
|
height: 3.33vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="concession">
|
<div class="concession">
|
||||||
<span>¥{{ item.proskusaleprice?.toFixed(2) }}</span>
|
<span>¥{{ item.proskusaleprice?.toFixed(2) }}</span>
|
||||||
<p v-if="item.discountratio">{{ item.discountratio }}%让利</p>
|
<p v-if="item.discountratio">惠利{{ item.discountratio }}%</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -74,7 +74,8 @@
|
|||||||
<div class="logistics-item">
|
<div class="logistics-item">
|
||||||
<span class="label">物流单号</span>
|
<span class="label">物流单号</span>
|
||||||
<span class="value">{{ currentLogistics?.exportnum }}</span>
|
<span class="value">{{ currentLogistics?.exportnum }}</span>
|
||||||
<img src="/img/copy_b.png" @click="$copyText(currentLogistics?.exportnum); $showSuccessToast('复制成功')" alt="">
|
<img src="/img/copy_b.png" @click="$copyText(currentLogistics?.exportnum); $showSuccessToast('复制成功')"
|
||||||
|
alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="logistics-close">
|
<div class="logistics-close">
|
||||||
@ -176,19 +177,19 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 加载订单状态和类型列表
|
// 加载订单状态和类型列表
|
||||||
// async loadFilterOptions() {
|
async loadFilterOptions() {
|
||||||
// try {
|
try {
|
||||||
// const [stateRes, areaRes] = await Promise.all([
|
const [stateRes, areaRes] = await Promise.all([
|
||||||
// this.$get('/v1/client/FOrdersClient/orderstate'),
|
this.$get('/v1/client/FOrdersClient/orderstate'),
|
||||||
// this.$get('/v1/client/EProsClient/mallstate'),
|
this.$get('/v1/client/EProsClient/mallstate'),
|
||||||
// ])
|
])
|
||||||
// this.tradeStates = stateRes.data || []
|
this.tradeStates = stateRes.data || []
|
||||||
// this.mallList = [{ value: 0, label: '全部订单' }, ...(areaRes.data || [])]
|
this.mallList = [{ value: 0, label: '全部订单' }, ...(areaRes.data || [])]
|
||||||
// this._initializing = false
|
this._initializing = false
|
||||||
// } catch (err) {
|
} catch (err) {
|
||||||
// this.$showFailToast(err.message || '加载失败')
|
this.$showFailToast(err.message || '加载失败')
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
|
|
||||||
// Tab 切换 - 订单状态
|
// Tab 切换 - 订单状态
|
||||||
onTabChange(name) {
|
onTabChange(name) {
|
||||||
|
|||||||
@ -47,7 +47,7 @@ export default {
|
|||||||
this.data.NickName = userInfo.data.nickname || ''
|
this.data.NickName = userInfo.data.nickname || ''
|
||||||
}
|
}
|
||||||
const inviteCode = userInfo?.data?.cellphone || ''
|
const inviteCode = userInfo?.data?.cellphone || ''
|
||||||
this.link = `${location.origin}${location.pathname}#/Login?invite=${inviteCode}`
|
this.link = `${location.origin}${location.pathname}#/Login?RecommendCode=${inviteCode}`
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('获取用户信息失败:', err)
|
console.error('获取用户信息失败:', err)
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@ -13,7 +13,16 @@ export default defineConfig({
|
|||||||
https: false,
|
https: false,
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(
|
||||||
|
{
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
// 忽略wx-open-launch 开头的组件,这些是微信的默认组件
|
||||||
|
isCustomElement: (tag) => tag.includes('wx-open-launch')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
),
|
||||||
Components({
|
Components({
|
||||||
resolvers: [VantResolver()],
|
resolvers: [VantResolver()],
|
||||||
}),
|
}),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user