mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
refactor: 更新多个页面的样式和结构
This commit is contained in:
pikachu1995@126.com
@@ -5,39 +5,63 @@
|
||||
<image class="img" src="@/pages/cart/static/pay.png" />
|
||||
<p class="ptips">收银台</p>
|
||||
|
||||
<p class="ptips">剩余支付时间：
|
||||
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa" border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
|
||||
</p>
|
||||
<p class="ptips">
|
||||
<view class="ptips ptips-countdown">
|
||||
剩余支付时间：
|
||||
<u-count-down
|
||||
v-if="autoCancelTime > 0"
|
||||
:time="autoCancelTime"
|
||||
format="HH:mm:ss"
|
||||
@finish="onPayTimeout"
|
||||
>
|
||||
<template #default="{ hours, minutes, seconds }">
|
||||
<view class="countdown-box">
|
||||
<text class="countdown-num">{{ padTime(hours) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(minutes) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(seconds) }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</u-count-down>
|
||||
<view v-else class="countdown-box">
|
||||
<text class="countdown-num">00</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">00</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ptips ptips-price">
|
||||
支付金额
|
||||
<span>¥{{unitPrice(cashierParams.price) }}</span>
|
||||
</p>
|
||||
<text class="price-text">¥{{ unitPrice(cashierParams.price) }}</text>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="__pay_form__">
|
||||
</div>
|
||||
<div class="block-4" v-if="cashierParams.price > 0">
|
||||
<div class="payItem">支付方式</div>
|
||||
<div class="payItem" v-for="(item, index) in payList" :key="index">
|
||||
<u-row class="row">
|
||||
<div class="col1" @click="awaitPay(item, index)" size="100" style="text-align:left;">
|
||||
<div v-if="item == 'ALIPAY'">
|
||||
<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="80"></u-icon>
|
||||
<span class="method_name">支付宝</span>
|
||||
</div>
|
||||
<div v-if="item == 'WECHAT'">
|
||||
<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="80"></u-icon>
|
||||
<span class="method_name">微信</span>
|
||||
</div>
|
||||
<div v-if="item == 'WALLET'">
|
||||
<u-icon class="method_icon" name="red-packet-fill" color="#dd6161" size="80"></u-icon>
|
||||
<span class="method_name">余额支付(当前余额：¥{{unitPrice(walletValue) }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col3" @click="awaitPay(item)" textAlign="right">
|
||||
<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</u-row>
|
||||
<div class="payItem payItem-title">支付方式</div>
|
||||
<div
|
||||
class="payItem payItem-method"
|
||||
v-for="(item, index) in payList"
|
||||
:key="index"
|
||||
@click="awaitPay(item, index)"
|
||||
>
|
||||
<view class="method-left">
|
||||
<template v-if="item == 'ALIPAY'">
|
||||
<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="44"></u-icon>
|
||||
<text class="method_name">支付宝</text>
|
||||
</template>
|
||||
<template v-if="item == 'WECHAT'">
|
||||
<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="44"></u-icon>
|
||||
<text class="method_name">微信</text>
|
||||
</template>
|
||||
<template v-if="item == 'WALLET'">
|
||||
<u-icon class="method_icon" name="red-packet-fill" color="#dd6161" size="44"></u-icon>
|
||||
<text class="method_name">余额支付(当前余额：¥{{ unitPrice(walletValue) }})</text>
|
||||
</template>
|
||||
</view>
|
||||
<u-icon size="28" color="#b1b1b1" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,8 +92,8 @@
|
||||
paymentClient: "",
|
||||
//余额
|
||||
walletValue: 0.0,
|
||||
// 支付倒计时
|
||||
autoCancel: 0,
|
||||
// 支付倒计时（毫秒）
|
||||
autoCancelTime: 0,
|
||||
|
||||
};
|
||||
},
|
||||
@@ -193,8 +217,8 @@
|
||||
|
||||
|
||||
this.walletValue = res.data.result.walletValue;
|
||||
this.autoCancel =
|
||||
(res.data.result.autoCancel - new Date().getTime()) / 1000;
|
||||
const cancelAt = Number(res.data.result.autoCancel);
|
||||
this.autoCancelTime = cancelAt > 0 ? Math.max(cancelAt - Date.now(), 0) : 0;
|
||||
}
|
||||
else if(res.data.code == 32000){
|
||||
setTimeout(()=>{
|
||||
@@ -214,6 +238,22 @@
|
||||
}, 2000)
|
||||
},
|
||||
|
||||
padTime(val) {
|
||||
return String(val ?? 0).padStart(2, '0');
|
||||
},
|
||||
|
||||
onPayTimeout() {
|
||||
uni.showToast({
|
||||
title: '支付超时，请重新下单',
|
||||
icon: 'none',
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/myOrder?status=0',
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
//订单支付
|
||||
async pay(payment) {
|
||||
|
||||
@@ -433,64 +473,97 @@
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.method_icon {
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.method-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.method_name {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep .u-row {
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.method_name,
|
||||
.col1 {
|
||||
color: #333;
|
||||
padding-left: 20rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.col1 {
|
||||
text-align: center;
|
||||
flex: 99;
|
||||
}
|
||||
|
||||
.col3 {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.payItem {
|
||||
padding: 13px 25rpx;
|
||||
border-top: 1px solid #f9f9f9;
|
||||
|
||||
line-height: 100rpx;
|
||||
font-size: 36rpx;
|
||||
padding: 0 30rpx;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.payItem-title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.payItem-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 100rpx;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ptips {
|
||||
font-size: 32rpx;
|
||||
margin: 20rpx 0;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
> span {
|
||||
.ptips-countdown {
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.ptips-price {
|
||||
.price-text {
|
||||
font-size: 40rpx;
|
||||
color: #df5a52;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.countdown-num {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44rpx;
|
||||
height: 44rpx;
|
||||
padding: 0 8rpx;
|
||||
font-size: 28rpx;
|
||||
color: #008ffa;
|
||||
border: 1rpx solid #008ffa;
|
||||
border-radius: 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.countdown-colon {
|
||||
margin: 0 6rpx;
|
||||
font-size: 28rpx;
|
||||
color: #008ffa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 392rpx !important;
|
||||
height: 296rpx !important;
|
||||
|
||||
@@ -1,40 +1,79 @@
|
||||
<template>
|
||||
<view class="add-address">
|
||||
<div class="uForm">
|
||||
<u-form :border-bottom="false" :model="form" ref="uForm" error-type="toast" :rules="rules">
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="selectAddress" @click="clickUniMap">
|
||||
选择收货地址
|
||||
<u-form :model="form" ref="uForm" error-type="toast" :rules="rules">
|
||||
<u-form-item label="收货人" label-width="130" prop="name" :border-bottom="true">
|
||||
<u-input
|
||||
v-model="form.name"
|
||||
border="none"
|
||||
input-align="right"
|
||||
clearable
|
||||
placeholder="请输入收货人姓名"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号码" label-width="130" prop="mobile" :border-bottom="true">
|
||||
<u-input
|
||||
v-model="form.mobile"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入收货人手机号码"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="所在区域" label-width="130" prop="___path" :border-bottom="true">
|
||||
<view class="form-value" @click="showPicker">
|
||||
{{ form.___path || '请选择所在地区' }}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<u-form-item class="border" label="收货人" label-width="130" prop="name">
|
||||
<u-input v-model="form.name" clearable placeholder="请输入收货人姓名" />
|
||||
</u-form-item>
|
||||
<template #right>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号码" label-width="130" prop="mobile">
|
||||
<u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入收货人手机号码" />
|
||||
</u-form-item>
|
||||
<u-form-item label="所在区域" label-width="130" prop="___path">
|
||||
<div @click="showPicker" >
|
||||
{{ form.___path || '请选择所在地区' }}
|
||||
</div>
|
||||
</u-form-item>
|
||||
<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail">
|
||||
<u-input type="textarea" v-model="form.detail" maxlength="100" height="150" placeholder="街道楼牌号等" />
|
||||
</u-form-item>
|
||||
<u-form-item label="地址别名" label-width="130">
|
||||
<u-input v-model="form.alias" placeholder="请输入地址别名" />
|
||||
</u-form-item>
|
||||
<u-checkbox usedAlone shape="circle" size="30" :active-color="lightColor" v-model:checked="form.isDefault" label="设为默认地址"></u-checkbox>
|
||||
<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail" :border-bottom="true">
|
||||
<u-input
|
||||
type="textarea"
|
||||
v-model="form.detail"
|
||||
maxlength="100"
|
||||
height="150"
|
||||
border="none"
|
||||
placeholder="街道楼牌号等"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<div class="saveBtn" @click="save">保存</div>
|
||||
</u-form>
|
||||
<u-form-item label="地址别名" label-width="130" :border-bottom="false">
|
||||
<u-input
|
||||
v-model="form.alias"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入地址别名"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4">
|
||||
</m-city>
|
||||
<view class="default-row">
|
||||
<u-checkbox
|
||||
usedAlone
|
||||
shape="circle"
|
||||
size="30"
|
||||
:active-color="lightColor"
|
||||
v-model:checked="form.isDefault"
|
||||
label="设为默认地址"
|
||||
></u-checkbox>
|
||||
</view>
|
||||
|
||||
<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
|
||||
</div>
|
||||
<view class="saveBtn" @click="save">保存</view>
|
||||
</u-form>
|
||||
|
||||
<m-city
|
||||
:provinceData="list"
|
||||
headTitle="区域选择"
|
||||
ref="cityPicker"
|
||||
@funcValue="getpickerParentValue"
|
||||
pickerSize="4"
|
||||
></m-city>
|
||||
|
||||
<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@@ -299,66 +338,89 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.add-address {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item) {
|
||||
padding: 0 30rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body) {
|
||||
min-height: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__left__content__label) {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__right__content__slot) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.u-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detailAddress {
|
||||
::v-deep .u-form-item--left {
|
||||
display: flex;
|
||||
:deep(.u-form-item__body) {
|
||||
align-items: flex-start;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__left) {
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__right__content__slot) {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.saveBtn,
|
||||
.selectAddress {
|
||||
height: 70rpx;
|
||||
|
||||
line-height: 70rpx;
|
||||
.default-row {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
:deep(.default-row .u-checkbox__label) {
|
||||
font-size: 28rpx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.saveBtn {
|
||||
margin: 40rpx 30rpx 0;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
background: $aider-light-color;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
width: 70%;
|
||||
margin: 40rpx auto 0 auto;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
.selectAddress {
|
||||
margin-top: 40rpx;
|
||||
background: #fff;
|
||||
|
||||
color: $aider-light-color;
|
||||
border: 2rpx solid $aider-light-color;
|
||||
}
|
||||
|
||||
.uForm {
|
||||
width: 94%;
|
||||
overflow: hidden;
|
||||
left: 3%;
|
||||
position: relative;
|
||||
top: 2%;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 0 40rpx 0;
|
||||
}
|
||||
.add-address {
|
||||
width: 100%;
|
||||
padding-top: 3%;
|
||||
|
||||
::v-deep .u-form-item {
|
||||
background-color: #fff;
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
.u-btn {
|
||||
margin: 30rpx 30rpx 0 30rpx;
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
::v-deep.u-checkbox {
|
||||
margin: 30rpx 30rpx 0 30rpx;
|
||||
|
||||
.u-label-class.u-checkbox__label {
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-checkbox__label {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,69 +1,75 @@
|
||||
<template>
|
||||
<view class="wap">
|
||||
<u-navbar title="预存款列表">
|
||||
</u-navbar>
|
||||
<u-navbar
|
||||
title="预存款列表"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
|
||||
<view class="wrapper-show-money">
|
||||
<view class="money-view">
|
||||
<h3>预存款金额 </h3>
|
||||
<view class="money">￥{{unitPrice(walletNum) }}</view>
|
||||
|
||||
<text class="money-label">预存款金额</text>
|
||||
<text class="money">￥{{ unitPrice(walletNum) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper-tabs">
|
||||
|
||||
<swiper class="swiper-box" :current="swiperCurrent">
|
||||
<view class="wrapper-tabs">
|
||||
<swiper class="swiper-box" :current="swiperCurrent">
|
||||
<swiper-item class="swiper-item" v-for="index in list.length" :key="index">
|
||||
<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view v-if="depositData.length!=0" class="view-item" v-for="(logItem, logIndex) in depositData" :key="logIndex">
|
||||
<view class="view-item-detail">
|
||||
<view class="-title">{{logItem.detail}}</view>
|
||||
<!-- <view class="-number">{{logItem.detail}}</view> -->
|
||||
</view>
|
||||
<view class="view-item-change">
|
||||
<view class="-money green" v-if="logItem.serviceType == 'WALLET_PAY' || logItem.serviceType == 'WALLET_WITHDRAWAL'"> {{unitPrice(logItem.money)}} </view>
|
||||
<view class="-money" v-if="logItem.serviceType == 'WALLET_REFUND' || logItem.serviceType == 'WALLET_RECHARGE' || logItem.serviceType == 'WALLET_COMMISSION' ">
|
||||
+{{unitPrice(logItem.money)}} </view>
|
||||
<view class="-time">{{logItem.createTime}}</view>
|
||||
<scroll-view
|
||||
class="scroll-v view-wrapper"
|
||||
enable-back-to-top
|
||||
scroll-with-animation
|
||||
scroll-y
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<view v-if="depositData.length != 0" class="list-card">
|
||||
<view
|
||||
class="view-item"
|
||||
v-for="(logItem, logIndex) in depositData"
|
||||
:key="logIndex"
|
||||
>
|
||||
<view class="view-item-detail">
|
||||
<text class="item-title">{{ logItem.detail }}</text>
|
||||
</view>
|
||||
<view class="view-item-change">
|
||||
<text
|
||||
class="item-money"
|
||||
:class="getMoneyClass(logItem.serviceType)"
|
||||
>{{ formatLogMoney(logItem) }}</text>
|
||||
<text class="item-time">{{ logItem.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-empty v-if="depositData.length==0" mode="history" text="暂无记录" />
|
||||
|
||||
<u-empty v-if="depositData.length == 0" mode="history" text="暂无记录" />
|
||||
</scroll-view>
|
||||
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserRecharge, getWalletLog } from "@/api/members";
|
||||
import { getUserWallet } from "@/api/members";
|
||||
import { getUserRecharge, getWalletLog, getUserWallet } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
walletNum: 0,
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
userInfo: "", //用户详情信息
|
||||
userInfo: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
order: "desc",
|
||||
},
|
||||
depositData: [], //遍历的数据集合
|
||||
rechargeList: "", //充值明细列表
|
||||
walletLogList: "", //钱包变动列表
|
||||
list: [
|
||||
// {
|
||||
// name: "充值明细",
|
||||
// },
|
||||
{
|
||||
name: "预存款变动明细",
|
||||
},
|
||||
],
|
||||
depositData: [],
|
||||
rechargeList: "",
|
||||
walletLogList: "",
|
||||
list: [{ name: "预存款变动明细" }],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -73,47 +79,51 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
this.getWallet();
|
||||
let result = await getUserWallet(); //预存款
|
||||
|
||||
const result = await getUserWallet();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**分页获取预存款充值记录 */
|
||||
isOutgoing(serviceType) {
|
||||
return serviceType === "WALLET_PAY" || serviceType === "WALLET_WITHDRAWAL";
|
||||
},
|
||||
isIncoming(serviceType) {
|
||||
return (
|
||||
serviceType === "WALLET_REFUND" ||
|
||||
serviceType === "WALLET_RECHARGE" ||
|
||||
serviceType === "WALLET_COMMISSION"
|
||||
);
|
||||
},
|
||||
getMoneyClass(serviceType) {
|
||||
if (this.isOutgoing(serviceType)) return "out";
|
||||
if (this.isIncoming(serviceType)) return "in";
|
||||
return "";
|
||||
},
|
||||
formatLogMoney(logItem) {
|
||||
const amount = this.unitPrice(logItem.money);
|
||||
if (this.isOutgoing(logItem.serviceType)) return `-${amount}`;
|
||||
if (this.isIncoming(logItem.serviceType)) return `+${amount}`;
|
||||
return amount;
|
||||
},
|
||||
getRecharge() {
|
||||
getUserRecharge(this.params).then((res) => {
|
||||
if (res.data.success) {
|
||||
if (res.data.result.records.length != 0) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
if (res.data.success && res.data.result.records.length) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getWallet() {
|
||||
|
||||
getWalletLog(this.params).then((res) => {
|
||||
if (res.data.success) {
|
||||
if (res.data.result.records.length != 0) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
if (res.data.success && res.data.result.records.length) {
|
||||
this.depositData.push(...res.data.result.records);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
changed(index) {
|
||||
this.depositData = [];
|
||||
this.swiperCurrent = index;
|
||||
this.params.pageNumber = 1;
|
||||
if (index == 0) {
|
||||
// this.getRecharge();
|
||||
this.getWallet();
|
||||
} else {
|
||||
this.getWallet();
|
||||
}
|
||||
this.getWallet();
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
this.params.pageNumber++;
|
||||
this.getWallet();
|
||||
@@ -123,97 +133,123 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.green {
|
||||
color: $aider-color-green !important;
|
||||
.wap {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.wrapper-show-money {
|
||||
flex-shrink: 0;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.money-view {
|
||||
height: 100%;
|
||||
padding: 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(
|
||||
25deg,
|
||||
$main-color,
|
||||
$light-color,
|
||||
$aider-light-color
|
||||
);
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-top: 12rpx;
|
||||
max-width: 100%;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.wrapper-tabs {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.swiper-item,
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.view-item {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.view-item-detail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.view-item-change {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-self: center;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-money {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
|
||||
&.in {
|
||||
color: $aider-color-green;
|
||||
}
|
||||
.view-item-change {
|
||||
text-align: right;
|
||||
> .-money {
|
||||
font-size: 36rpx;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
> .-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.view-item-detail {
|
||||
line-height: 1.75;
|
||||
> .-title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
> .-number {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.submit-btn {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
|
||||
color: #fff;
|
||||
background: $main-color;
|
||||
|
||||
margin: 0 auto;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.operation {
|
||||
font-size: 32rpx;
|
||||
margin-right: 24rpx;
|
||||
color: rgb(96, 98, 102);
|
||||
}
|
||||
.money {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.money-view {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(
|
||||
25deg,
|
||||
$main-color,
|
||||
$light-color,
|
||||
$aider-light-color
|
||||
);
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
/* #ifndef H5 */
|
||||
height: calc(100vh - 200rpx);
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 288rpx);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.wap {
|
||||
width: 100%;
|
||||
height: calc(100vh - 44px);
|
||||
}
|
||||
|
||||
.wrapper-show-money {
|
||||
height: 200rpx;
|
||||
// background-image: url('/static/img/main-bg.jpg');
|
||||
|
||||
&.out {
|
||||
color: #ff5a5f;
|
||||
}
|
||||
}
|
||||
|
||||
.item-time {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,41 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-navbar :auto-back="false" @leftClick="back" title="余额"></u-navbar>
|
||||
<div class="box">
|
||||
<div class="deposit">预存款金额</div>
|
||||
<div class="money">￥{{unitPrice(walletNum) }}</div>
|
||||
<div class="operation-btns">
|
||||
<div class="operation-btn light" @click="navigateTo('/pages/mine/deposit/withdrawal')">提现</div>
|
||||
<div class="operation-btn" @click="navigateTo('/pages/mine/deposit/recharge')">充值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" @click="navigateTo('/pages/mine/deposit/index')">
|
||||
<div class="list-left">预存款明细</div>
|
||||
<div class="list-right">
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box list" @click="navigateTo('/pages/mine/deposit/withdrawApply')">
|
||||
<div class="list-left">提现记录</div>
|
||||
<div class="list-right">
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="page">
|
||||
<u-navbar
|
||||
title="余额"
|
||||
:auto-back="false"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
@leftClick="back"
|
||||
></u-navbar>
|
||||
|
||||
<view class="page-body">
|
||||
<view class="balance-card">
|
||||
<view class="deposit">预存款金额</view>
|
||||
<view class="money">￥{{ unitPrice(walletNum) }}</view>
|
||||
<view class="operation-btns">
|
||||
<view
|
||||
class="operation-btn light"
|
||||
@click="navigateTo('/pages/mine/deposit/withdrawal')"
|
||||
>提现</view>
|
||||
<view
|
||||
class="operation-btn primary"
|
||||
@click="navigateTo('/pages/mine/deposit/recharge')"
|
||||
>充值</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-item" @click="navigateTo('/pages/mine/deposit/index')">
|
||||
<text class="list-label">预存款明细</text>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</view>
|
||||
<view class="list-item" @click="navigateTo('/pages/mine/deposit/withdrawApply')">
|
||||
<text class="list-label">提现记录</text>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -34,7 +48,7 @@ export default {
|
||||
},
|
||||
async onShow() {
|
||||
if (this.isLogin("auth")) {
|
||||
let result = await getUserWallet(); //预存款
|
||||
let result = await getUserWallet();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
} else {
|
||||
this.navigateToLogin("redirectTo");
|
||||
@@ -46,75 +60,92 @@ export default {
|
||||
url: "/pages/tabbar/user/my",
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 跳转
|
||||
*/
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
uni.navigateTo({ url });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.list-left {
|
||||
flex: 8;
|
||||
}
|
||||
.list-right {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
}
|
||||
.wrapper {
|
||||
width: 94%;
|
||||
margin: 0 3%;
|
||||
}
|
||||
.box {
|
||||
margin: 20rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
padding: 40rpx;
|
||||
.page-body {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 48rpx 32rpx 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.deposit {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin: 24rpx 0 40rpx;
|
||||
font-size: 64rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.operation-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
.money {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 50rpx;
|
||||
margin: 20rpx 0 40rpx 0;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.deposit {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.operation-btn {
|
||||
background: #ee6d41;
|
||||
color: #fff;
|
||||
height: 90rpx;
|
||||
width: 240rpx;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.light {
|
||||
background: #fdf2ee;
|
||||
color: #ee6d41;
|
||||
color: $light-color;
|
||||
border: 1px solid rgba(238, 109, 65, 0.25);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin-top: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,52 +1,136 @@
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="-list">
|
||||
<view class="page">
|
||||
<view class="form-card">
|
||||
<view class="title">充值金额</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<span> ￥</span>
|
||||
<u-input v-model="price" placeholder='金额' type="number" />
|
||||
|
||||
</view>
|
||||
|
||||
<view class="amount-row">
|
||||
<text class="currency">￥</text>
|
||||
<u-input
|
||||
v-model="price"
|
||||
type="digit"
|
||||
border="none"
|
||||
placeholder="请输入充值金额"
|
||||
input-align="left"
|
||||
class="amount-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit" :class="{'light':flag}" @click="handlerRecharge">充值</view>
|
||||
<view class="submit" :class="{ disabled: flag }" @click="handlerRecharge">充值</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { recharge } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
price: 0,
|
||||
price: "",
|
||||
flag: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
price(val) {
|
||||
val <= 0 ? (this.flag = true) : (this.flag = false);
|
||||
this.flag = !(Number(val) > 0);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 充值
|
||||
async handlerRecharge() {
|
||||
if (this.price > 0) {
|
||||
|
||||
let res = await recharge({ price: this.price });
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
|
||||
});
|
||||
}
|
||||
const amount = Number(this.price);
|
||||
if (!(amount > 0)) {
|
||||
uni.showToast({
|
||||
title: "请输入充值金额",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await recharge({ price: amount });
|
||||
if (res.data.success) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16rpx 0 8rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.currency {
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
||||
height: 72rpx !important;
|
||||
min-height: 72rpx !important;
|
||||
font-size: 56rpx !important;
|
||||
font-weight: 600 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 80rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<view class="wap">
|
||||
<u-navbar title="提现记录"></u-navbar>
|
||||
<u-navbar
|
||||
title="提现记录"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view v-if="records.length != 0" class="view-item" v-for="(item, index) in records" :key="index">
|
||||
<view class="view-item-detail">
|
||||
|
||||
@@ -1,122 +1,273 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="-list">
|
||||
<view class="title">提现类型</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input disabled :value="type === 'ALI' ? '支付宝' : '微信'" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="form-card">
|
||||
<view class="field-label">提现类型</view>
|
||||
<view class="readonly-value">{{ typeLabel }}</view>
|
||||
</view>
|
||||
<view class="-list">
|
||||
<view class="title">提现金额</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<span> ￥</span>
|
||||
<u-input v-model="price" placeholder="" type="number" />
|
||||
</view>
|
||||
|
||||
<view class="all">
|
||||
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
|
||||
<view style="font-size: 24rpx; color: #999">可提现金额<span>{{unitPrice(walletNum) }}</span>元</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tips">
|
||||
最低提现金额为 {{ minPrice }} 元
|
||||
</view>
|
||||
</view>
|
||||
<view class="-list" v-if="type === 'ALI'">
|
||||
<view class="title">真实姓名</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input v-model="realName" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="-list" v-if="type === 'ALI'">
|
||||
<view class="title">第三方登录账号</view>
|
||||
<view class="content">
|
||||
<view class="price">
|
||||
<u-input v-model="connectNumber" placeholder="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-card">
|
||||
<view class="field-label">提现金额</view>
|
||||
<view class="amount-main">
|
||||
<view class="amount-left">
|
||||
<text class="currency">￥</text>
|
||||
<u-input
|
||||
v-model="price"
|
||||
type="digit"
|
||||
border="none"
|
||||
placeholder="请输入提现金额"
|
||||
input-align="left"
|
||||
class="amount-input"
|
||||
/>
|
||||
</view>
|
||||
<view class="amount-extra">
|
||||
<text class="all-btn" @click="handleAll">全部</text>
|
||||
<text class="balance-tip">可提现金额 {{ unitPrice(walletNum) }} 元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">最低提现金额为 {{ minPrice }} 元</view>
|
||||
</view>
|
||||
|
||||
<template v-if="type === 'ALI'">
|
||||
<view class="form-card">
|
||||
<view class="field-row">
|
||||
<text class="field-label">真实姓名</text>
|
||||
<u-input
|
||||
v-model="realName"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入真实姓名"
|
||||
class="field-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-card">
|
||||
<view class="field-row">
|
||||
<text class="field-label">第三方登录账号</text>
|
||||
<u-input
|
||||
v-model="connectNumber"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入支付宝账号"
|
||||
class="field-input"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="submit" @click="cashd">提现</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserWallet, withdrawalApply, withdrawalSettingVO } from "@/api/members";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
price: 0,
|
||||
price: "",
|
||||
walletNum: 0,
|
||||
minPrice: 0,
|
||||
type: '',
|
||||
connectNumber: '',
|
||||
realName: ''
|
||||
minPrice: 0,
|
||||
type: "",
|
||||
connectNumber: "",
|
||||
realName: "",
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
let result = await getUserWallet(); //预存款
|
||||
let res = await withdrawalSettingVO();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
this.minPrice = res.data.result.minPrice;
|
||||
this.type = res.data.result.type;
|
||||
computed: {
|
||||
typeLabel() {
|
||||
if (this.type === "ALI") return "支付宝";
|
||||
if (this.type) return "微信";
|
||||
return "--";
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
const result = await getUserWallet();
|
||||
const res = await withdrawalSettingVO();
|
||||
this.walletNum = result.data.result.memberWallet;
|
||||
this.minPrice = res.data.result.minPrice;
|
||||
this.type = res.data.result.type;
|
||||
},
|
||||
|
||||
methods: {
|
||||
cashd() {
|
||||
this.price = this.price + "";
|
||||
|
||||
if (this.$u.test.amount(parseInt(this.price))) {
|
||||
let params = { price: this.price };
|
||||
if (this.type === 'ALI') {
|
||||
if (!this.connectNumber || !this.realName) {
|
||||
uni.showToast({
|
||||
title: "请输入真实姓名和第三方登录账号",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.connectNumber = this.connectNumber;
|
||||
params.realName = this.realName;
|
||||
}
|
||||
withdrawalApply(params).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "提现成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const amount = Number(this.price);
|
||||
if (!this.$u.test.amount(parseInt(amount))) {
|
||||
uni.showToast({
|
||||
title: "请输入正确金额",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const params = { price: amount };
|
||||
if (this.type === "ALI") {
|
||||
if (!this.connectNumber || !this.realName) {
|
||||
uni.showToast({
|
||||
title: "请输入真实姓名和第三方登录账号",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.connectNumber = this.connectNumber;
|
||||
params.realName = this.realName;
|
||||
}
|
||||
|
||||
withdrawalApply(params).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "提现成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
handleAll() {
|
||||
this.price = this.walletNum;
|
||||
this.price = String(this.walletNum || "");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./style.scss";
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.readonly-value {
|
||||
margin-top: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.amount-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.currency {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12rpx;
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.amount-extra {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-left: 24rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
font-size: 28rpx;
|
||||
color: $main-color;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.balance-tip {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.field-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input),
|
||||
:deep(.field-input .u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content),
|
||||
:deep(.field-input .u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
||||
height: 72rpx !important;
|
||||
min-height: 72rpx !important;
|
||||
font-size: 56rpx !important;
|
||||
font-weight: 600 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
color: #c0c4cc !important;
|
||||
}
|
||||
|
||||
:deep(.field-input .u-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 56rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -67,44 +67,67 @@
|
||||
|
||||
<view class="goods-list">
|
||||
<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
|
||||
<u-swipe-action v-for="(item, index) in goodsList" ref="swiperAction" :key="item.id">
|
||||
<u-swipe-action-item :disabled="!params.checked" :show="item.___selected" @open="openAction(item)" :name="index" :options="options"
|
||||
@click="changeActionTab(item)">
|
||||
<block v-for="(item, index) in goodsList" :key="item.id">
|
||||
<u-swipe-action v-if="params.checked" class="distribution-swipe">
|
||||
<u-swipe-action-item
|
||||
:show="item.___selected"
|
||||
@open="openAction(item)"
|
||||
:name="index"
|
||||
:options="options"
|
||||
@click="changeActionTab(item)"
|
||||
>
|
||||
<view class="goods-item">
|
||||
<view class="goods-item-img" @click="handleNavgationGoods(item)">
|
||||
<u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-item-desc">
|
||||
<view class="-item-title" @click="handleNavgationGoods(item)">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
<view class="-item-price" @click="handleNavgationGoods(item)">
|
||||
佣金:
|
||||
<span> ￥{{ unitPrice(item.commission) }}</span>
|
||||
</view>
|
||||
<view class="-item-bottom">
|
||||
<view class="-item-bootom-money" @click="handleNavgationGoods(item)">
|
||||
<view class="-item-yj">
|
||||
<span>￥{{ unitPrice(item.price) }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="click" @click="handleLink(item)">分销商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
|
||||
<div class="goods-item">
|
||||
<view v-else class="goods-item">
|
||||
<view class="goods-item-img" @click="handleNavgationGoods(item)">
|
||||
<u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
|
||||
</view>
|
||||
<view class="goods-item-desc">
|
||||
<!-- 商品描述 -->
|
||||
<view class="-item-title" @click="handleNavgationGoods(item)">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
<!-- 商品金额 -->
|
||||
<view class="-item-price" @click="handleNavgationGoods(item)">
|
||||
佣金:
|
||||
<span> ￥{{unitPrice(item.commission) }}</span>
|
||||
<span> ￥{{ unitPrice(item.commission) }}</span>
|
||||
</view>
|
||||
<!-- 比率佣金 -->
|
||||
<view class="-item-bottom">
|
||||
<view class="-item-bootom-money" @click="handleNavgationGoods(item)">
|
||||
<!-- <view class="-item-bl">
|
||||
比率:
|
||||
<span>{{ "5.00%" }}</span>
|
||||
</view> -->
|
||||
<view class="-item-yj">
|
||||
<span>￥{{unitPrice(item.price) }}</span>
|
||||
<span>￥{{ unitPrice(item.price) }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="click" v-if="!params.checked" @click="handleClickGoods(item)">立即选取</view>
|
||||
<view class="click" v-if="params.checked" @click="handleLink(item)">分销商品</view>
|
||||
<view class="click" @click="handleClickGoods(item)">立即选取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</u-swipe-action-item>
|
||||
</u-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
@@ -419,7 +442,39 @@ export default {
|
||||
height: 88rpx;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #666;
|
||||
}
|
||||
> .nav-item.checked {
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 80rpx;
|
||||
height: 4rpx;
|
||||
background: $main-color;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.distribution-swipe,
|
||||
:deep(.u-swipe-action),
|
||||
:deep(.u-swipe-action-item),
|
||||
:deep(.u-swipe-action-item__content) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.u-swipe-action-item) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.u-swipe-action-item__content) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.click {
|
||||
background: $main-color;
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<u-navbar class="my-title" title-size="32" :title="toUser.name"></u-navbar>
|
||||
<u-navbar
|
||||
class="my-title"
|
||||
title-size="32"
|
||||
:title="toUser.name"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
|
||||
<view :animation="anData" style="height:0;">
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-navbar class="my-title" title-size="32" :title="'消息(' + talkList.length + ')'"></u-navbar>
|
||||
<u-navbar
|
||||
class="my-title"
|
||||
title-size="32"
|
||||
:title="'消息(' + talkList.length + ')'"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData(tabIndex)">
|
||||
|
||||
<!-- 消息列表 -->
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
left-icon=""
|
||||
:auto-back="true"
|
||||
title=""
|
||||
>
|
||||
<template #center>
|
||||
@@ -311,9 +311,11 @@
|
||||
}
|
||||
|
||||
.slot-wrap {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collect-tabs {
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<view class="myTracks">
|
||||
<u-navbar title="我的足迹">
|
||||
<u-navbar
|
||||
title="我的足迹"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:auto-back="true"
|
||||
>
|
||||
<template #right>
|
||||
<div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
|
||||
</template>
|
||||
@@ -12,7 +17,11 @@
|
||||
<u-empty text="暂无历史记录" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
|
||||
<view v-else class="tracks-list">
|
||||
<block v-for="(item, index) in trackList" :key="index">
|
||||
<view class="myTracks-title" @click="navigateToStore(item)">{{ item.storeName }}</view>
|
||||
<view
|
||||
class="myTracks-title"
|
||||
v-if="getStoreName(item)"
|
||||
@click="navigateToStore(item)"
|
||||
>{{ getStoreName(item) }}</view>
|
||||
<u-swipe-action class="myTracks-swipe">
|
||||
<u-swipe-action-item
|
||||
:show="item.show"
|
||||
@@ -60,6 +69,7 @@
|
||||
myTrackList,
|
||||
deleteHistoryListId
|
||||
} from "@/api/members.js";
|
||||
import { getStoreBaseInfo } from "@/api/store.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -80,6 +90,7 @@
|
||||
}
|
||||
}],
|
||||
trackList: [], //足迹列表
|
||||
storeNameMap: {},
|
||||
};
|
||||
},
|
||||
|
||||
@@ -100,6 +111,32 @@
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
getStoreName(item) {
|
||||
return item.storeName || this.storeNameMap[item.storeId] || "";
|
||||
},
|
||||
async enrichStoreNames(records) {
|
||||
const storeIds = [
|
||||
...new Set(
|
||||
records
|
||||
.filter((item) => !item.storeName && item.storeId)
|
||||
.map((item) => item.storeId)
|
||||
),
|
||||
].filter((storeId) => !this.storeNameMap[storeId]);
|
||||
|
||||
await Promise.all(
|
||||
storeIds.map(async (storeId) => {
|
||||
try {
|
||||
const res = await getStoreBaseInfo(storeId);
|
||||
const name = res.data?.result?.storeName;
|
||||
if (name) {
|
||||
this.storeNameMap[storeId] = name;
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
checkboxChangeDP(val){
|
||||
console.log(val)
|
||||
},
|
||||
@@ -147,21 +184,23 @@
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
myTrackList(this.params).then((res) => {
|
||||
myTrackList(this.params).then(async (res) => {
|
||||
uni.stopPullDownRefresh();
|
||||
uni.hideLoading();
|
||||
if (res.statusCode == 200) {
|
||||
res.data.result.records.length &&
|
||||
res.data.result.records.forEach((item) => {
|
||||
item.show = false;
|
||||
item.checked = false
|
||||
});
|
||||
const records = res.data.result.records || [];
|
||||
records.forEach((item) => {
|
||||
item.show = false;
|
||||
item.checked = false;
|
||||
});
|
||||
|
||||
let data = res.data.result.records;
|
||||
if (data.total == 0) {
|
||||
this.whetherEmpty = true;
|
||||
if (!records.length) {
|
||||
if (this.trackList.length === 0) {
|
||||
this.whetherEmpty = true;
|
||||
}
|
||||
} else {
|
||||
this.trackList.push(...data);
|
||||
await this.enrichStoreNames(records);
|
||||
this.trackList.push(...records);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,40 +1,41 @@
|
||||
|
||||
<template>
|
||||
<view class="edition-intro">
|
||||
<image :src="config.logo" class="logo" />
|
||||
<h1> {{config.name}}</h1>
|
||||
<view class='version'>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
Version {{localVersion.version}}
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
小程序版本: {{localVersion.version}} {{ localVersion.envVersion}}
|
||||
<!-- #endif -->
|
||||
<view class="header-block">
|
||||
<image :src="config.logo" class="logo" mode="aspectFit" />
|
||||
<text class="app-name">{{ config.name }}</text>
|
||||
<view class="version">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
Version {{ localVersion.version }}
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
小程序版本: {{ localVersion.version }} {{ localVersion.envVersion }}
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- {{localVersion}} -->
|
||||
<u-cell-group class="cell" :border="false">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<u-cell v-if="IosWhether" @click="checkStar" title="去评分"></u-cell>
|
||||
<u-cell title="功能介绍" @click="navigateTo('/pages/mine/set/versionFunctionList')"></u-cell>
|
||||
<u-cell title="检查更新" @click="checkUpdate"></u-cell>
|
||||
<!-- #endif -->
|
||||
|
||||
<u-cell title="证照信息" @click="navigateTo('/pages/mine/help/tips?type=LICENSE_INFORMATION')"></u-cell>
|
||||
<u-cell title="服务协议" @click="navigateTo('/pages/mine/help/tips?type=USER_AGREEMENT')"></u-cell>
|
||||
<u-cell title="隐私协议" @click="navigateTo('/pages/mine/help/tips?type=PRIVACY_POLICY')"></u-cell>
|
||||
<u-cell title="关于我们" :border="false" @click="navigateTo('/pages/mine/help/tips?type=ABOUT')"></u-cell>
|
||||
<u-cell-group class="cell-group">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<u-cell v-if="IosWhether" isLink title="去评分" @click="checkStar"></u-cell>
|
||||
<u-cell isLink title="功能介绍" @click="navigateTo('/pages/mine/set/versionFunctionList')"></u-cell>
|
||||
<u-cell isLink title="检查更新" @click="checkUpdate"></u-cell>
|
||||
<!-- #endif -->
|
||||
|
||||
<u-cell isLink title="证照信息" @click="navigateTo('/pages/mine/help/tips?type=LICENSE_INFORMATION')"></u-cell>
|
||||
<u-cell isLink title="服务协议" @click="navigateTo('/pages/mine/help/tips?type=USER_AGREEMENT')"></u-cell>
|
||||
<u-cell isLink title="隐私协议" @click="navigateTo('/pages/mine/help/tips?type=PRIVACY_POLICY')"></u-cell>
|
||||
<u-cell isLink title="关于我们" @click="navigateTo('/pages/mine/help/tips?type=ABOUT')"></u-cell>
|
||||
</u-cell-group>
|
||||
|
||||
<view class="intro">
|
||||
<view>{{config.customerServiceMobile ? `客服热线：${config.customerServiceMobile}` : ``}}</view>
|
||||
<view style="margin:20rpx 0 0 0;">{{config.customerServiceEmail ? `客服邮箱：${config.customerServiceEmail}` : ``}}</view>
|
||||
|
||||
<view>
|
||||
<view style="margin:20rpx 0; color:#003a8c;" @click="navigateTo('/pages/mine/help/tips?type=USER_AGREEMENT')">《{{config.name}}用户协议》</view>
|
||||
<view>CopyRight ©{{config.name}} </view>
|
||||
<view v-if="config.customerServiceMobile">客服热线：{{ config.customerServiceMobile }}</view>
|
||||
<view v-if="config.customerServiceEmail" class="intro-line">客服邮箱：{{ config.customerServiceEmail }}</view>
|
||||
<view class="intro-line">
|
||||
<text class="intro-link" @click="navigateTo('/pages/mine/help/tips?type=USER_AGREEMENT')">
|
||||
《{{ config.name }}用户协议》
|
||||
</text>
|
||||
</view>
|
||||
<view class="intro-line">CopyRight ©{{ config.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -47,10 +48,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
IosWhether: false, //是否是ios
|
||||
editionHistory: [], //版本历史
|
||||
versionData: {}, //版本信息
|
||||
localVersion: "", //当前版本信息
|
||||
IosWhether: false,
|
||||
editionHistory: [],
|
||||
versionData: {},
|
||||
localVersion: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
@@ -60,9 +61,6 @@ export default {
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS
|
||||
const platform = uni.getSystemInfoSync().platform;
|
||||
/**
|
||||
* 获取是否是安卓
|
||||
*/
|
||||
if (platform === "android") {
|
||||
this.params.type = 0;
|
||||
} else {
|
||||
@@ -78,19 +76,16 @@ export default {
|
||||
};
|
||||
});
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const accountInfo = wx.getAccountInfoSync();
|
||||
console.log("===========accountInfo==============");
|
||||
console.log(accountInfo);
|
||||
this.version_number = accountInfo.miniProgram.version // 小程序 版本号
|
||||
this.localVersion = {
|
||||
versionCode: accountInfo.miniProgram.version.replace(/\./g, ""),
|
||||
version: accountInfo.miniProgram.version ,// 小程序 版本号,
|
||||
envVersion:accountInfo.miniProgram.envVersion, //判断小程序是开发版本还是release版本
|
||||
};
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const accountInfo = wx.getAccountInfoSync();
|
||||
this.version_number = accountInfo.miniProgram.version;
|
||||
this.localVersion = {
|
||||
versionCode: accountInfo.miniProgram.version.replace(/\./g, ""),
|
||||
version: accountInfo.miniProgram.version,
|
||||
envVersion: accountInfo.miniProgram.envVersion,
|
||||
};
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -110,18 +105,12 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* ios点击评分
|
||||
*/
|
||||
checkStar() {
|
||||
plus.runtime.launchApplication({
|
||||
action: `itms-apps://itunes.apple.com/app/${config.iosAppId}?action=write-review`,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查更新
|
||||
*/
|
||||
checkUpdate() {
|
||||
if (
|
||||
this.versionData.version.replace(/\./g, "") <
|
||||
@@ -144,34 +133,74 @@ export default {
|
||||
page {
|
||||
background: #fff !important;
|
||||
}
|
||||
.cell {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.edition-intro {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin: 20rpx 0 20rpx 0;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
> .version {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
margin-top: 100rpx;
|
||||
font-size: 24rpx;
|
||||
letter-spacing: 2rpx;
|
||||
.header-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 0 48rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
margin-top: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cell-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.u-cell) {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
:deep(.u-cell__title-text) {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.u-cell__right-icon-wrap) {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
padding: 48rpx 40rpx 60rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
letter-spacing: 1rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.intro-line {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.intro-link {
|
||||
color: #003a8c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,93 +1,133 @@
|
||||
<template>
|
||||
<view class="person-msg">
|
||||
<view class="head c-content" @click="changeFace">
|
||||
<image :src="form.face || '/static/missing-face.png'" mode=""></image>
|
||||
<view class="head" @click="changeFace">
|
||||
<image :src="form.face || '/static/missing-face.png'" mode="aspectFill"></image>
|
||||
<view>点击修改头像</view>
|
||||
</view>
|
||||
|
||||
<u-form :model="form" ref="uForm" class="form">
|
||||
<u-form-item label="昵称" label-width="150">
|
||||
<u-input v-model="form.nickName" placeholder="请输入昵称" />
|
||||
</u-form-item>
|
||||
<u-form-item label="性别" label-width="150">
|
||||
<u-radio-group v-model="form.sex" :active-color="lightColor">
|
||||
<u-radio name="1">男</u-radio>
|
||||
<u-radio name="0">女</u-radio>
|
||||
</u-radio-group>
|
||||
<u-form-item label="昵称" label-width="150" :border-bottom="true">
|
||||
<u-input
|
||||
v-model="form.nickName"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="生日" label-width="150" right-icon="arrow-right">
|
||||
<div style="width: 100%;" @click="showBirthday = true">{{ birthday || '请选择出生日期' }}</div>
|
||||
<u-picker v-model:show="showBirthday" mode="time" :confirm-color="lightColor" @confirm="selectTime"></u-picker>
|
||||
<u-form-item label="性别" label-width="150" :border-bottom="true">
|
||||
<view class="sex-row">
|
||||
<u-radio-group v-model="form.sex" :active-color="lightColor" :gap="40">
|
||||
<u-radio name="1" label="男" shape="circle"></u-radio>
|
||||
<u-radio name="0" label="女" shape="circle"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
|
||||
<div style="width: 100%;" @click="clickRegion">{{ form.___path || '请选择城市' }}</div>
|
||||
|
||||
<u-form-item label="生日" label-width="150" :border-bottom="true">
|
||||
<view class="form-value" @click="showBirthday = true">
|
||||
{{ birthday || '请选择出生日期' }}
|
||||
</view>
|
||||
<template #right>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="城市" label-width="150" :border-bottom="true">
|
||||
<view class="form-value" @click="clickRegion">
|
||||
{{ form.___path || '请选择城市' }}
|
||||
</view>
|
||||
<template #right>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号" label-width="150" :border-bottom="false">
|
||||
<view v-if="form.mobile" class="form-value">{{ form.mobile }}</view>
|
||||
<view v-else class="bind-mobile" @click="navigateTo(form.username)">绑定手机号码</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号" label-width="150">
|
||||
<view v-if="form.mobile">
|
||||
{{form.mobile}}
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="submit" style="text-align: left;" @click="navigateTo(form.username)">绑定手机号码</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
</u-form>
|
||||
<div class="bottom">
|
||||
|
||||
<view class="bottom">
|
||||
<view class="submit" @click="submit">保存</view>
|
||||
<view class="submit light" @click="quiteLoginOut">退出登录</view>
|
||||
</div>
|
||||
<m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getPickerParentValue" pickerSize="4"></m-city>
|
||||
<view class="submit light" @click="quiteLoginOut">退出登录</view>
|
||||
</view>
|
||||
|
||||
<u-datetime-picker
|
||||
v-model:show="showBirthday"
|
||||
v-model="birthdayValue"
|
||||
mode="date"
|
||||
:min-date="minBirthdayDate"
|
||||
:max-date="maxBirthdayDate"
|
||||
:confirm-color="lightColor"
|
||||
@confirm="selectTime"
|
||||
@cancel="closeBirthdayPicker"
|
||||
></u-datetime-picker>
|
||||
|
||||
<m-city
|
||||
:provinceData="region"
|
||||
headTitle="区域选择"
|
||||
ref="cityPicker"
|
||||
@funcValue="getPickerParentValue"
|
||||
pickerSize="4"
|
||||
></m-city>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { saveUserInfo, getUserInfo } from "@/api/members.js";
|
||||
import { saveUserInfo } from "@/api/members.js";
|
||||
import { upload } from "@/api/common.js";
|
||||
import storage from "@/utils/storage.js";
|
||||
import city from "@/components/m-city/m-city.vue";
|
||||
|
||||
function parseBirthdayTimestamp(str) {
|
||||
if (!str) {
|
||||
return Date.now();
|
||||
}
|
||||
const timestamp = Date.parse(String(str).replace(/-/g, "/"));
|
||||
return Number.isFinite(timestamp) ? timestamp : Date.now();
|
||||
}
|
||||
|
||||
function formatBirthday(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { "m-city": city },
|
||||
data() {
|
||||
const userInfo = storage.getUserInfo() || {};
|
||||
return {
|
||||
lightColor: this.$lightColor, //高亮颜色
|
||||
lightColor: this.$lightColor,
|
||||
form: {
|
||||
nickName: storage.getUserInfo().nickName || "",
|
||||
birthday: storage.getUserInfo().birthday || "",
|
||||
face: storage.getUserInfo().face || "/static/missing-face.png", //默认头像
|
||||
regionId: [], //地址Id
|
||||
region: storage.getUserInfo().region || [], //地址
|
||||
sex: storage.getUserInfo().sex, //性别
|
||||
___path: storage.getUserInfo().region,
|
||||
mobile: storage.getUserInfo().mobile,
|
||||
username: storage.getUserInfo().username,
|
||||
nickName: userInfo.nickName || "",
|
||||
birthday: userInfo.birthday || "",
|
||||
face: userInfo.face || "/static/missing-face.png",
|
||||
regionId: [],
|
||||
region: userInfo.region || [],
|
||||
sex: userInfo.sex != null ? String(userInfo.sex) : "1",
|
||||
___path: userInfo.region,
|
||||
mobile: userInfo.mobile,
|
||||
username: userInfo.username,
|
||||
},
|
||||
birthday: storage.getUserInfo().birthday || "", //生日
|
||||
photo: [
|
||||
{ text: "立即拍照", color: this.$mainColor },
|
||||
{ text: "从相册选择", color: this.$mainColor },
|
||||
],
|
||||
birthday: userInfo.birthday || "",
|
||||
birthdayValue: parseBirthdayTimestamp(userInfo.birthday),
|
||||
minBirthdayDate: new Date("1950-01-01").getTime(),
|
||||
maxBirthdayDate: Date.now(),
|
||||
region: [
|
||||
//请求城市默认地址
|
||||
{
|
||||
id: "",
|
||||
localName: "请选择",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
showBirthday: false, //显示生日日期
|
||||
showBirthday: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
quiteLoginOut() {
|
||||
this.quiteLoginOut();
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择地址回调
|
||||
*/
|
||||
getPickerParentValue(e) {
|
||||
this.form.region = [];
|
||||
this.form.regionId = [];
|
||||
@@ -107,19 +147,13 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击选择地址
|
||||
*/
|
||||
clickRegion() {
|
||||
this.$refs.cityPicker.show();
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交保存
|
||||
*/
|
||||
submit() {
|
||||
delete this.form.___path;
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
const params = JSON.parse(JSON.stringify(this.form));
|
||||
saveUserInfo(params).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
storage.setUserInfo(res.data.result);
|
||||
@@ -128,10 +162,7 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 修改头像
|
||||
*/
|
||||
changeFace(index) {
|
||||
changeFace() {
|
||||
uni.chooseImage({
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
@@ -143,8 +174,7 @@ export default {
|
||||
accessToken: storage.getAccessToken(),
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
let data = JSON.parse(uploadFileRes.data);
|
||||
|
||||
const data = JSON.parse(uploadFileRes.data);
|
||||
this.form.face = data.result;
|
||||
},
|
||||
});
|
||||
@@ -152,74 +182,59 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择地址
|
||||
*/
|
||||
selectRegion(region) {
|
||||
|
||||
this.form["address"] = `${region.province.label} ${region.city.label} ${region.area.label}`
|
||||
;
|
||||
selectTime(e) {
|
||||
const timestamp = typeof e?.value === "number" ? e.value : this.birthdayValue;
|
||||
const formatted = formatBirthday(timestamp);
|
||||
this.birthdayValue = timestamp;
|
||||
this.form.birthday = formatted;
|
||||
this.birthday = formatted;
|
||||
this.showBirthday = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择时间
|
||||
*/
|
||||
selectTime(time) {
|
||||
this.form.birthday = `${time.year}-${time.month}-${time.day}`;
|
||||
this.birthday = `${time.year} - ${time.month} - ${time.day}`;
|
||||
closeBirthdayPicker() {
|
||||
this.showBirthday = false;
|
||||
},
|
||||
|
||||
navigateTo(username) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/set/securityCenter/bindMobile?username=" + username,
|
||||
});
|
||||
},
|
||||
|
||||
syncUserInfo() {
|
||||
const userInfo = storage.getUserInfo() || {};
|
||||
this.form.nickName = userInfo.nickName || "";
|
||||
this.form.birthday = userInfo.birthday || "";
|
||||
this.form.face = userInfo.face || "/static/missing-face.png";
|
||||
this.form.region = userInfo.region || [];
|
||||
this.form.sex = userInfo.sex != null ? String(userInfo.sex) : "1";
|
||||
this.form.___path = userInfo.region;
|
||||
this.form.mobile = userInfo.mobile;
|
||||
this.form.username = userInfo.username;
|
||||
this.birthday = userInfo.birthday || "";
|
||||
this.birthdayValue = parseBirthdayTimestamp(userInfo.birthday);
|
||||
},
|
||||
|
||||
navigateTo(username) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
/**
|
||||
* 页面显示时执行
|
||||
*/
|
||||
onShow() {
|
||||
// 从缓存中重新获取用户信息
|
||||
const userInfo = storage.getUserInfo();
|
||||
// 更新表单数据
|
||||
this.form.nickName = userInfo.nickName || "";
|
||||
this.form.birthday = userInfo.birthday || "";
|
||||
this.form.face = userInfo.face || "/static/missing-face.png";
|
||||
this.form.region = userInfo.region || [];
|
||||
this.form.sex = userInfo.sex;
|
||||
this.form.___path = userInfo.region;
|
||||
this.form.mobile = userInfo.mobile;
|
||||
this.form.username = userInfo.username;
|
||||
this.birthday = userInfo.birthday || "";
|
||||
this.syncUserInfo();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.submit {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin-top: 90rpx;
|
||||
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
color: $main-color;
|
||||
border-radius: 100px;
|
||||
|
||||
.person-msg {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
height: 260rpx;
|
||||
padding: 40rpx 0 20rpx;
|
||||
color: $font-color-light;
|
||||
font-size: $font-sm;
|
||||
display: flex;
|
||||
@@ -227,39 +242,104 @@ page{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 2em;
|
||||
|
||||
image {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
::v-deep .u-form {
|
||||
background-color: #ffffff;
|
||||
padding: 0;
|
||||
margin-top: 30rpx;
|
||||
.u-form-item {
|
||||
padding: 0 20rpx;
|
||||
height: 110rpx;
|
||||
line-height: 110rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
background: #fff;
|
||||
}
|
||||
.bottom{
|
||||
|
||||
:deep(.u-form-item) {
|
||||
padding: 0 30rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body) {
|
||||
min-height: 100rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__left__content__label) {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__right__content__slot) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.u-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.sex-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.sex-row .u-radio-group) {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-value {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bind-mobile {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
>.submit{
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.light{
|
||||
|
||||
.submit {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
font-size: 30rpx;
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.submit + .submit {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.light {
|
||||
background: rgba($color: $light-color, $alpha: 0.2) !important;
|
||||
color: $light-color !important;
|
||||
}
|
||||
|
||||
@@ -1,29 +1,39 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="set-up">
|
||||
<view class="person" @click="checkUserInfo()">
|
||||
<u-image width=140 height="140" shape="circle" :src="userInfo.face || userImage" mode="">
|
||||
</u-image>
|
||||
<u-image
|
||||
width="140rpx"
|
||||
height="140rpx"
|
||||
shape="circle"
|
||||
:src="userInfo.face || userImage"
|
||||
mode="aspectFill"
|
||||
></u-image>
|
||||
<view class="user-name">
|
||||
{{ userInfo.id ? userInfo.nickName || '' : '暂未登录' }}
|
||||
{{ userInfo.id ? userInfo.nickName || '' : '暂未登录' }}
|
||||
</view>
|
||||
<u-icon color="#ccc" name="arrow-right"></u-icon>
|
||||
<u-icon color="#ccc" name="arrow-right" size="16"></u-icon>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view style="height: 20rpx; width: 100%"></view>
|
||||
<!-- #endif -->
|
||||
<u-cell-group :border="false">
|
||||
|
||||
<u-cell-group class="cell-group">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<u-cell title="清除缓存" :value="fileSizeString" @click="clearCache"></u-cell>
|
||||
<u-cell :isLink="false" title="清除缓存" :value="fileSizeString" @click="clearCache"></u-cell>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<u-cell title="安全中心" @click="navigateTo('/pages/mine/set/securityCenter/securityCenter')"></u-cell>
|
||||
<u-cell
|
||||
:isLink="false"
|
||||
title="安全中心"
|
||||
@click="navigateTo('/pages/mine/set/securityCenter/securityCenter')"
|
||||
></u-cell>
|
||||
<!-- #endif -->
|
||||
<u-cell title="用户注销" v-if="userInfo.id" @click="logoff"></u-cell>
|
||||
<u-cell title="意见反馈" @click="navigateTo('/pages/mine/set/feedBack')"></u-cell>
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- #endif -->
|
||||
<u-cell :title="`关于${config.name}`" @click="navigateTo('/pages/mine/set/editionIntro')"></u-cell>
|
||||
<u-cell :isLink="false" title="用户注销" v-if="userInfo.id" @click="logoff"></u-cell>
|
||||
<u-cell :isLink="false" title="意见反馈" @click="navigateTo('/pages/mine/set/feedBack')"></u-cell>
|
||||
<u-cell
|
||||
:isLink="false"
|
||||
:title="`关于${config.name}`"
|
||||
@click="navigateTo('/pages/mine/set/editionIntro')"
|
||||
></u-cell>
|
||||
</u-cell-group>
|
||||
|
||||
<view class="submit" v-if="userInfo.id" @click="quiteLoginOut">退出登录</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -34,7 +44,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
userImage:config.defaultUserPhoto,
|
||||
userImage: config.defaultUserPhoto,
|
||||
isCertificate: false,
|
||||
userInfo: {},
|
||||
fileSizeString: "0B",
|
||||
@@ -50,25 +60,8 @@ export default {
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
quiteLoginOut() {
|
||||
this.quiteLoginOut();
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户注销
|
||||
*/
|
||||
logoff(){
|
||||
this.logoff();
|
||||
},
|
||||
|
||||
/**
|
||||
* 读取当前缓存
|
||||
*/
|
||||
getCacheSize() {
|
||||
//获取缓存数据
|
||||
let that = this;
|
||||
plus.cache.calculate(function (size) {
|
||||
let sizeCache = parseInt(size);
|
||||
@@ -86,10 +79,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击用户详情
|
||||
* 判断当前是否进入用户中心
|
||||
*/
|
||||
checkUserInfo() {
|
||||
if (this.isLogin("auth")) {
|
||||
this.navigateTo("/pages/mine/set/personMsg");
|
||||
@@ -98,11 +87,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 清除当前设备缓存
|
||||
*/
|
||||
clearCache() {
|
||||
//清理缓存
|
||||
let that = this;
|
||||
let os = plus.os.name;
|
||||
if (os == "Android") {
|
||||
@@ -111,28 +96,27 @@ export default {
|
||||
let files = plus.android.invoke(sdRoot, "listFiles");
|
||||
let len = files.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
let filePath = "" + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
|
||||
let filePath = "" + files[i];
|
||||
plus.io.resolveLocalFileSystemURL(
|
||||
filePath,
|
||||
function (entry) {
|
||||
if (entry.isDirectory) {
|
||||
entry.removeRecursively(
|
||||
function (entry) {
|
||||
//递归删除其下的所有文件及子目录
|
||||
function () {
|
||||
uni.showToast({
|
||||
title: "缓存清理完成",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
that.getCacheSize(); // 重新计算缓存
|
||||
that.getCacheSize();
|
||||
},
|
||||
function (e) {}
|
||||
function () {}
|
||||
);
|
||||
} else {
|
||||
entry.remove();
|
||||
}
|
||||
},
|
||||
function (e) {
|
||||
function () {
|
||||
uni.showToast({
|
||||
title: "文件路径读取失败",
|
||||
duration: 2000,
|
||||
@@ -142,7 +126,6 @@ export default {
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// ios
|
||||
plus.cache.clear(function () {
|
||||
uni.showToast({
|
||||
title: "缓存清理完成",
|
||||
@@ -163,50 +146,58 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.set-up {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 36rpx 30rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 30rpx;
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.u-cell) {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
:deep(.u-cell__title-text) {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.u-cell__value) {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.submit {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
margin-top: 90rpx;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
color: $main-color;
|
||||
}
|
||||
.person {
|
||||
height: 208rpx;
|
||||
display: flex;
|
||||
padding: 0 20rpx;
|
||||
font-size: $font-base;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
.user-name {
|
||||
width: 500rpx;
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
margin-left: 30rpx;
|
||||
line-height: 2em;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
.u-cell {
|
||||
height: 110rpx;
|
||||
/* line-height: 110rpx; */
|
||||
padding: 0 20rpx;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
::v-deep .u-cell__value {
|
||||
color: #cccccc !important;
|
||||
}
|
||||
|
||||
::v-deep .u-cell__right-icon-wrap {
|
||||
color: #cccccc !important;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
|
||||
<view class="top">{{ item }} </view>
|
||||
<view class="bottom">
|
||||
<u-icon name="error" v-if="item <= currentDay" color="#999"></u-icon>
|
||||
<u-icon name="error" v-if="item <= currentDay" size="24" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="back" :class="signArr.indexOf(item) != -1 ? 'active' : ''" :style="
|
||||
@@ -40,7 +40,7 @@
|
||||
">
|
||||
<view class="top">{{ item }}</view>
|
||||
<view class="bottom">
|
||||
<u-icon name="checkmark" :color="aiderLightColor"></u-icon>
|
||||
<u-icon name="checkmark" size="24" :color="aiderLightColor"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -382,7 +382,7 @@ page {
|
||||
|
||||
.item {
|
||||
width: 66rpx;
|
||||
height: 80rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -403,8 +403,11 @@ page {
|
||||
.top {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
min-height: 0;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@@ -413,7 +416,8 @@ page {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 15rpx;
|
||||
top: 50%;
|
||||
margin-top: -28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -437,9 +441,12 @@ page {
|
||||
.bottom {
|
||||
color: #999;
|
||||
font-size: 20rpx;
|
||||
height: 20rpx;
|
||||
line-height: 20rpx;
|
||||
text-align: center;
|
||||
height: 36rpx;
|
||||
min-height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 8rpx 24rpx 20rpx;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
padding: 12rpx 28rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
max-width: 100%;
|
||||
background: #f0f2f5;
|
||||
border-radius: 100px;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tag-more {
|
||||
color: $light-color;
|
||||
background: #fff5f0;
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #fff !important;
|
||||
@@ -181,7 +203,7 @@ page {
|
||||
|
||||
.add1 {
|
||||
background: #fff;
|
||||
padding: 30rpx 0;
|
||||
padding: 16rpx 0 0;
|
||||
}
|
||||
|
||||
.oldKeyRow {
|
||||
@@ -209,10 +231,6 @@ page {
|
||||
}
|
||||
|
||||
|
||||
view {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.store-seller-name {
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
@@ -296,7 +314,7 @@ view {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background-color: #ededed;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.keyword-list-box {
|
||||
@@ -345,6 +363,9 @@ view {
|
||||
|
||||
.keyword-box {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block {
|
||||
@@ -353,50 +374,32 @@ view {
|
||||
|
||||
.keyword-box .keyword-block .keyword-list-header {
|
||||
width: 100%;
|
||||
padding: 20rpx 3%;
|
||||
padding: 20rpx 24rpx 8rpx;
|
||||
font-size: 27rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .keyword-list-header image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .keyword > view {
|
||||
width: 50%;
|
||||
line-height: 1.75;
|
||||
overflow: hidden;
|
||||
padding: 0 3% 0 3% !important;
|
||||
}
|
||||
|
||||
.u-tips {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.keyword-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clear {
|
||||
color: #666666;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 28rpx;
|
||||
background: #f7f7f7;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .hide-hot-tis {
|
||||
@@ -468,11 +471,29 @@ view {
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding-top: 300rpx;
|
||||
color: #999999;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
::v-deep .u-image {
|
||||
width: 346rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 320rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 24rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.8;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
<mSearch
|
||||
ref="mSearch"
|
||||
class="mSearch-input-box"
|
||||
:show-clear="false"
|
||||
@clickLeft="back"
|
||||
:mode="2"
|
||||
:placeholder="defaultKeyword"
|
||||
@@ -38,25 +39,39 @@
|
||||
</scroll-view>
|
||||
<div class="keyword-box" v-show="!isShowKeywordList">
|
||||
<view class="keyword-block add1">
|
||||
<view class="keyword-list-header"><view class="u-tips">热门搜索</view></view>
|
||||
<view class="keyword keywordBox">
|
||||
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
|
||||
<view class="keyword-list-header">
|
||||
<view class="u-tips">热门搜索</view>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<view
|
||||
class="tag-item wes"
|
||||
v-for="(keyword, index) in hotKeywordList"
|
||||
:key="index"
|
||||
@tap="doSearch(keyword)"
|
||||
>{{ keyword }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="keyword-block" v-if="oldKeywordList.length > 0">
|
||||
<view class="keyword-list-header"><view class="u-tips">搜索历史</view></view>
|
||||
<div class="oldKeyList">
|
||||
<view class="keyword-list-header">
|
||||
<view class="u-tips">搜索历史</view>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<template v-for="(keyword, index) in oldKeywordList" :key="index">
|
||||
<div class="oldKeyItem" v-if="keyword" @click="doSearch(keyword)">
|
||||
<span>{{ keyword }}</span>
|
||||
</div>
|
||||
<view
|
||||
class="tag-item wes"
|
||||
v-if="keyword"
|
||||
@tap="doSearch(keyword)"
|
||||
>{{ keyword }}</view>
|
||||
</template>
|
||||
|
||||
<div @click="showMore" v-if="oldKeywordIndex > loadIndex" class="oldKeyItem">展示更多</div>
|
||||
</div>
|
||||
<view
|
||||
class="tag-item tag-more"
|
||||
v-if="oldKeywordIndex > loadIndex"
|
||||
@tap="showMore"
|
||||
>展示更多</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</div>
|
||||
<view class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</view>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
@@ -93,7 +108,7 @@
|
||||
</view>
|
||||
<!-- 一行一个商品展示 -->
|
||||
<scroll-view
|
||||
v-if="isSWitch"
|
||||
v-if="!empty && isSWitch"
|
||||
class="goods-scroll"
|
||||
enableBackToTop="true"
|
||||
lower-threshold="250"
|
||||
@@ -106,7 +121,7 @@
|
||||
</scroll-view>
|
||||
<!-- 一行两个商品展示 -->
|
||||
<scroll-view
|
||||
v-if="!isSWitch && !(goodsList == [] || goodsList == '' || goodsList == null)"
|
||||
v-if="!empty && !isSWitch && goodsList.length"
|
||||
class="goods-scroll"
|
||||
scroll-anchoring
|
||||
enableBackToTop="true"
|
||||
@@ -118,6 +133,14 @@
|
||||
<goodsList :res="goodsList" :keyword="keyword" />
|
||||
<uni-load-more :status="loadingType"></uni-load-more>
|
||||
</scroll-view>
|
||||
|
||||
<view class="empty" v-if="empty">
|
||||
<image class="empty-img" src="/static/nodata.png" mode="aspectFit"></image>
|
||||
<view class="empty-text">
|
||||
<text>没有找到相关的商品信息</text>
|
||||
<text>请换一个关键词试试吧</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-popup border-radius="20" mode="right" width="90%" v-model:show="sortPopup">
|
||||
@@ -202,13 +225,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<div class="empty" v-if="empty">
|
||||
<view><image style="width: 320rpx; height: 240rpx" src="/static/nodata.png"></image></view>
|
||||
<view>
|
||||
<p>没有找到相关的商品信息</p>
|
||||
<p>请换一个关键词试试吧</p>
|
||||
</view>
|
||||
</div>
|
||||
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
||||
</view>
|
||||
</template>
|
||||
@@ -637,13 +653,14 @@ export default {
|
||||
}
|
||||
//没有更多直接返回 #TODO
|
||||
let goodsList = await getGoodsList(this.params);
|
||||
if (goodsList.data.result.records.length < 10) {
|
||||
const records = goodsList.data.result.records || [];
|
||||
if (records.length < 10) {
|
||||
this.loadingType = 'noMore';
|
||||
this.empty = true;
|
||||
} else {
|
||||
this.empty = false;
|
||||
this.loadingType = 'more';
|
||||
}
|
||||
this.goodsList.push(...goodsList.data.result.records);
|
||||
this.goodsList.push(...records);
|
||||
this.empty = this.goodsList.length === 0;
|
||||
|
||||
this.initSortGoods();
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
|
||||
@@ -27,34 +27,31 @@
|
||||
:key="orderIndex"
|
||||
>
|
||||
<!-- 店铺名称 -->
|
||||
<view class="seller-info u-flex u-row-between" v-if="current == 0">
|
||||
<view class="seller-name">
|
||||
<view class="name">{{ order.storeName }}</view>
|
||||
</view>
|
||||
<view class="order-sn">订单编号:{{ order.sn }}</view>
|
||||
<view class="seller-info" v-if="current == 0">
|
||||
<view class="seller-name wes">{{ order.storeName }}</view>
|
||||
<view class="order-sn wes">订单编号:{{ order.sn }}</view>
|
||||
</view>
|
||||
<!-- 申请记录 选项卡 -->
|
||||
<view class="seller-info u-flex u-row-between" v-if="current != 0">
|
||||
<view class="order-sn"
|
||||
>售后单号：{{ order.service_sn || order.sn }}</view
|
||||
>
|
||||
<view class="order-sn">{{ order.serviceType_text }}</view>
|
||||
<view class="seller-info" v-if="current != 0">
|
||||
<view class="order-sn wes">售后单号：{{ order.service_sn || order.sn }}</view>
|
||||
<view class="order-sn service-type">{{ order.serviceType_text }}</view>
|
||||
</view>
|
||||
<view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
|
||||
<view class="goods-item-view" @click="onDetail(order, sku)">
|
||||
<view class="goods-img">
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:src="sku.image"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
mode="aspectFill"
|
||||
:src="getGoodsImage(sku, order, goodsIndex)"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<view class="goods-title">{{ getGoodsName(sku) }}</view>
|
||||
<!-- 如果商品多个则不显示每个商品价格-->
|
||||
<view class="goods-price" v-if="order.orderItems.length <= 1">
|
||||
￥{{unitPrice(order.flowPrice) }}
|
||||
￥{{ unitPrice(order.flowPrice) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
@@ -119,7 +116,7 @@
|
||||
|
||||
<!-- 申请记录 -->
|
||||
</view>
|
||||
<view class="btn-view u-flex u-row-right">
|
||||
<view class="btn-view">
|
||||
<!-- 售后申请 -->
|
||||
|
||||
<div class="sale" v-if="current === 0 && sku.afterSaleStatus">
|
||||
@@ -172,7 +169,7 @@
|
||||
order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
|
||||
order.orderItems.length >= 1
|
||||
"
|
||||
class="btn-view u-flex u-row-between"
|
||||
class="btn-view order-total"
|
||||
>
|
||||
<!-- 多个商品显示订单总价格 -->
|
||||
<view class="cannot_apply">
|
||||
@@ -252,6 +249,17 @@ export default {
|
||||
this.change(this.current);
|
||||
},
|
||||
methods: {
|
||||
getGoodsName(sku) {
|
||||
return sku.goodsName || sku.name || "";
|
||||
},
|
||||
getGoodsImage(goods, order, index) {
|
||||
let image = goods.image || goods.goodsImage || goods.thumbnail;
|
||||
if (!image && order.groupImages) {
|
||||
const images = String(order.groupImages).split(",");
|
||||
image = images[index] || images[0];
|
||||
}
|
||||
return this.parseGoodsImageUrl(image);
|
||||
},
|
||||
/**
|
||||
* 点击搜索执行搜索
|
||||
*/
|
||||
@@ -471,6 +479,8 @@ page,
|
||||
.body-view {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 44px - 80rpx - 104rpx);
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.u-tabs-search {
|
||||
@@ -486,47 +496,70 @@ page,
|
||||
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
margin: 20rpx 0;
|
||||
padding: 0 20rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 70rpx;
|
||||
padding: 20rpx 0 16rpx;
|
||||
gap: 20rpx;
|
||||
|
||||
.seller-name {
|
||||
flex-shrink: 0;
|
||||
max-width: 40%;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.name {
|
||||
margin-left: 15rpx;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-sn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 22rpx;
|
||||
color: #909399;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.service-type {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 10rpx;
|
||||
align-items: flex-start;
|
||||
padding: 16rpx 0;
|
||||
|
||||
.goods-img {
|
||||
flex-shrink: 0;
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
@@ -537,23 +570,44 @@ page,
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #ff5a10;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
flex-shrink: 0;
|
||||
min-width: 60rpx;
|
||||
text-align: right;
|
||||
color: $main-color;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
padding: 16rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 16rpx 0 0;
|
||||
|
||||
.after-line {
|
||||
display: flex;
|
||||
line-height: 90rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-total {
|
||||
justify-content: flex-start;
|
||||
padding-top: 8rpx;
|
||||
padding-bottom: 4rpx;
|
||||
|
||||
.cannot_apply {
|
||||
text-align: left;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-form :model="form" ref="uForm">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="page-wrap">
|
||||
<scroll-view scroll-y class="page-scroll">
|
||||
<u-form :model="form" ref="uForm">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="header">
|
||||
<view>
|
||||
本次售后服务将由
|
||||
@@ -12,88 +13,147 @@
|
||||
<view>
|
||||
<template v-for="(item,index) in sku.orderItems" :key="index">
|
||||
<view class="goods-item-view" v-if="item.sn == sn"
|
||||
@click="gotoGoodsDetail(sku.goods_id)">
|
||||
@click="gotoGoodsDetail(sku.goodsId || sku.goods_id)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
mode="aspectFill"
|
||||
:src="getGoodsImage(item)"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ item.name }}</view>
|
||||
<view class="goods-title">{{ getGoodsName(item) }}</view>
|
||||
<view class="goods-price">
|
||||
<span>￥{{ applyInfo.applyRefundPrice }}</span>
|
||||
|
||||
<span class="num">购买数量:{{ item.num }}</span>
|
||||
<text>￥{{ unitPrice(applyInfo.applyRefundPrice) }}</text>
|
||||
<text class="num">购买数量: {{ item.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="after-num">
|
||||
<view>申请数量</view>
|
||||
<view>
|
||||
<u-number-box :value="parseInt(form.num)" disabled-input :min="1" :max="parseInt(sku.num)" bg-color="#fff"
|
||||
@change="valChange"></u-number-box>
|
||||
</view>
|
||||
<text class="after-num-label">申请数量</text>
|
||||
<u-number-box
|
||||
:value="parseInt(form.num)"
|
||||
disabled-input
|
||||
:min="1"
|
||||
:max="parseInt(sku.num)"
|
||||
bg-color="#fff"
|
||||
@change="valChange"
|
||||
></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="body-view">
|
||||
<!-- 退款原因 -->
|
||||
<view class="opt-view">
|
||||
<u-form-item label="申请原因" :label-width="150" >
|
||||
<div style="width: 100%; text-align: right;" @click="reasonSelectShow = true">{{ form.reason || '请选择申请原因' }}</div>
|
||||
<view class="opt-view form-block">
|
||||
<view class="form-row" @click="openReasonPicker">
|
||||
<text class="form-row-label">申请原因</text>
|
||||
<view class="form-row-value">
|
||||
<text class="form-value" :class="{ placeholder: !form.reason }">
|
||||
{{ form.reason || '请选择申请原因' }}
|
||||
</text>
|
||||
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-form-item label="申请说明" label-width="150" :border-bottom="false" class="desc-item">
|
||||
<u-input
|
||||
v-model="form.problemDesc"
|
||||
type="textarea"
|
||||
border="none"
|
||||
input-align="right"
|
||||
height="120"
|
||||
placeholder="请描述申请售后的说明"
|
||||
/>
|
||||
</u-form-item>
|
||||
<u-form-item label="申请说明" :label-width="150">
|
||||
<u-input input-align="right" type="textarea" v-model="form.problemDesc" placeholder="请描述申请售后的说明" />
|
||||
</view>
|
||||
|
||||
<!-- 退款方式 / 银行信息 -->
|
||||
<view class="opt-view form-block">
|
||||
<u-form-item label="退款方式" label-width="150" :border-bottom="true">
|
||||
<view class="form-value">{{
|
||||
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
|
||||
}}</view>
|
||||
</u-form-item>
|
||||
<template v-if="
|
||||
applyInfo.accountType === 'BANK_TRANSFER' &&
|
||||
applyInfo.applyRefundPrice != 0
|
||||
">
|
||||
<u-form-item label="银行开户行" label-width="150" :border-bottom="true">
|
||||
<u-input
|
||||
v-model="form.bankDepositName"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入银行开户行"
|
||||
/>
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" label-width="150" :border-bottom="true">
|
||||
<u-input
|
||||
v-model="form.bankAccountName"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入银行开户名"
|
||||
/>
|
||||
</u-form-item>
|
||||
<u-form-item label="银行账号" label-width="150" :border-bottom="true" class="bank-account-item">
|
||||
<u-input
|
||||
v-model="form.bankAccountNumber"
|
||||
border="none"
|
||||
input-align="right"
|
||||
placeholder="请输入银行账号"
|
||||
/>
|
||||
</u-form-item>
|
||||
</template>
|
||||
|
||||
<u-form-item
|
||||
v-if="form.serviceType !== 'RETURN_MONEY'"
|
||||
label="返回方式"
|
||||
label-width="150"
|
||||
:border-bottom="false"
|
||||
>
|
||||
<view class="form-value">快递至第三方卖家</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<!-- 上传凭证 -->
|
||||
<view class="opt-view">
|
||||
<view class="opt-view upload-block">
|
||||
<view class="img-title">上传凭证（最多5张）</view>
|
||||
<view class="images-view">
|
||||
<u-upload :file-list="fileList" :auto-upload="false" width="150"
|
||||
@afterRead="onUploadAfterRead" :max-count="5"></u-upload>
|
||||
<u-upload
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
width="150"
|
||||
@afterRead="onUploadAfterRead"
|
||||
:max-count="5"
|
||||
></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="opt-view">
|
||||
<u-form-item label="退款方式" :label-width="150">
|
||||
<u-input :value="
|
||||
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
|
||||
" type="text" input-align="right" :disabled="true" />
|
||||
</u-form-item>
|
||||
<view v-if="
|
||||
applyInfo.accountType === 'BANK_TRANSFER' &&
|
||||
applyInfo.applyRefundPrice != 0">
|
||||
<u-form-item label="银行开户行" :label-width="150">
|
||||
<u-input v-model="form.bankDepositName" type="text" input-align="right" placeholder="请输入银行开户行" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" :label-width="150">
|
||||
<u-input v-model="form.bankAccountName" type="text" input-align="right" placeholder="请输入银行开户名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行账号" :label-width="150">
|
||||
<u-input v-model="form.bankAccountNumber" type="text" input-align="right" placeholder="请输入银行账号" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<u-form-item label="返回方式" :label-width="150">
|
||||
<u-input type="text" input-align="right" value="快递至第三方卖家" :disabled="true" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
|
||||
</view>
|
||||
</u-form>
|
||||
</u-form>
|
||||
</scroll-view>
|
||||
|
||||
<view class="submit-view">
|
||||
<u-button type="primary" ripple shape="circle" v-if="applyInfo.refundWay" :custom-style="customStyle"
|
||||
@click="onSubmit">提交申请</u-button>
|
||||
<u-button
|
||||
type="primary"
|
||||
ripple
|
||||
shape="circle"
|
||||
v-if="applyInfo.refundWay"
|
||||
:custom-style="{ backgroundColor: $lightColor, width: '100%' }"
|
||||
@click="onSubmit"
|
||||
>提交申请</u-button>
|
||||
</view>
|
||||
<u-select mode="single-column" :list="reasonList" v-model:show="reasonSelectShow" @confirm="reasonSelectConfirm">
|
||||
</u-select>
|
||||
<u-select mode="single-column" :list="typeList" v-model:show="typeSelectShow" @confirm="typeSelectConfirm"></u-select>
|
||||
<u-select mode="single-column" :list="returnList" v-model:show="returnSelectShow" @confirm="returnSelectConfirm">
|
||||
</u-select>
|
||||
<u-picker
|
||||
v-model:show="reasonSelectShow"
|
||||
:columns="[reasonList]"
|
||||
keyName="label"
|
||||
valueName="value"
|
||||
title="申请原因"
|
||||
@confirm="reasonSelectConfirm"
|
||||
></u-picker>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
@@ -107,7 +167,6 @@ import {
|
||||
|
||||
import city from "@/components/m-city/m-city";
|
||||
import { handleUploadAfterRead } from "@/utils/uploadHelper.js";
|
||||
import { checkBankno } from "@/utils/Foundation";
|
||||
import storage from "@/utils/storage.js";
|
||||
export default {
|
||||
component: {
|
||||
@@ -127,34 +186,6 @@ export default {
|
||||
//退款原因 弹出框
|
||||
reasonSelectShow: false,
|
||||
reasonList: [],
|
||||
//退款方式为账号退款 账号类型弹出框
|
||||
typeSelectShow: false,
|
||||
typeList: [
|
||||
{
|
||||
value: "ALIPAY",
|
||||
label: "支付宝",
|
||||
},
|
||||
{
|
||||
value: "WEIXINPAY",
|
||||
label: "微信",
|
||||
},
|
||||
{
|
||||
value: "BANK_TRANSFER",
|
||||
label: "银行卡",
|
||||
},
|
||||
],
|
||||
//返回方式
|
||||
returnSelectShow: false,
|
||||
returnList: [
|
||||
{
|
||||
value: 1,
|
||||
label: "快递至第三方卖家",
|
||||
},
|
||||
],
|
||||
|
||||
customStyle: {
|
||||
backgroundColor: this.$lightColor,
|
||||
},
|
||||
applyInfo: {},
|
||||
form: {
|
||||
orderItemSn: "", // 订单sn
|
||||
@@ -206,6 +237,19 @@ export default {
|
||||
this.init(options.sn);
|
||||
},
|
||||
methods: {
|
||||
getGoodsName(item) {
|
||||
return item.goodsName || item.name || "";
|
||||
},
|
||||
getGoodsImage(item) {
|
||||
const image = item.image || item.goodsImage || item.thumbnail;
|
||||
return this.parseGoodsImageUrl(image);
|
||||
},
|
||||
gotoGoodsDetail(goodsId) {
|
||||
if (!goodsId) return;
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${this.form.skuId}&goodsId=${goodsId}`,
|
||||
});
|
||||
},
|
||||
/** 获取申请原因下拉框数据 */
|
||||
async getReasonActions(serviceType) {
|
||||
uni.showLoading({
|
||||
@@ -248,17 +292,24 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
openReasonPicker() {
|
||||
if (!this.reasonList.length) {
|
||||
uni.showToast({
|
||||
title: "暂无可选原因",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.reasonSelectShow = true;
|
||||
},
|
||||
|
||||
//退款原因
|
||||
reasonSelectConfirm(e) {
|
||||
this.form.reason = e[0].label;
|
||||
reasonSelectConfirm(val) {
|
||||
const selected = val?.value?.[0] || val?.[0];
|
||||
if (selected) {
|
||||
this.form.reason = selected.label || selected.text || "";
|
||||
}
|
||||
},
|
||||
//退款方式
|
||||
typeSelectConfirm(e) {
|
||||
this.form.accountType = e[0].value;
|
||||
this.form.accountType_label = e[0].label;
|
||||
},
|
||||
//返回方式
|
||||
returnSelectConfirm(e) {},
|
||||
|
||||
//修改申请数量
|
||||
valChange(e) {
|
||||
@@ -269,6 +320,17 @@ export default {
|
||||
this.form.images = urls;
|
||||
});
|
||||
},
|
||||
showToast(message, type = "error") {
|
||||
const text = message || (type === "success" ? "操作成功" : "操作失败");
|
||||
if (this.$refs.uToast) {
|
||||
this.$refs.uToast.show({ message: text, type });
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: text,
|
||||
icon: type === "success" ? "success" : "none",
|
||||
});
|
||||
},
|
||||
//提交申请
|
||||
onSubmit() {
|
||||
//提交申请前检测参数
|
||||
@@ -286,62 +348,48 @@ export default {
|
||||
applyReturn(this.sn, this.form).then((resp) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
if (resp.data.success) {
|
||||
this.$refs.uToast.show({ title: "提交成功", type: "success" });
|
||||
this.showToast("提交成功", "success");
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/afterSales/applySuccess",
|
||||
});
|
||||
} else {
|
||||
this.$refs.uToast.show({ title: resp.data.message, type: "error" });
|
||||
this.showToast(resp.data.message || "提交失败", "error");
|
||||
}
|
||||
});
|
||||
},
|
||||
//检测提交参数
|
||||
handleCheckParams() {
|
||||
if (this.$u.test.isEmpty(this.form.reason)) {
|
||||
this.$refs.uToast.show({ title: "请选择 退款原因", type: "error" });
|
||||
this.showToast("请选择退款原因");
|
||||
return false;
|
||||
}
|
||||
if (this.$u.test.isEmpty(this.form.problemDesc)) {
|
||||
this.$refs.uToast.show({ title: "请输入 退款说明", type: "error" });
|
||||
this.showToast("请输入退款说明");
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(this.form.accountType)
|
||||
if (this.form.accountType == "BANK_TRANSFER") {
|
||||
// 银行开户行校验
|
||||
if (
|
||||
this.applyInfo.accountType === "BANK_TRANSFER" &&
|
||||
this.applyInfo.applyRefundPrice != 0
|
||||
) {
|
||||
if (this.$u.test.isEmpty(this.form.bankDepositName)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行开户行",
|
||||
type: "error",
|
||||
});
|
||||
this.showToast("请输入银行开户行");
|
||||
return false;
|
||||
}
|
||||
// 银行开户名校验
|
||||
if (this.$u.test.isEmpty(this.form.bankAccountName)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行开户名",
|
||||
type: "error",
|
||||
});
|
||||
this.showToast("请输入银行开户名");
|
||||
return false;
|
||||
}
|
||||
// 银行账号校验
|
||||
if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行账号",
|
||||
type: "error",
|
||||
});
|
||||
this.showToast("请输入银行账号");
|
||||
return false;
|
||||
} else if (this.$u.test.chinese(this.form.bankAccountName) === false) {
|
||||
this.$refs.uToast.show({
|
||||
title: "银行开户名输入错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
if (this.$u.test.chinese(this.form.bankAccountName) === false) {
|
||||
this.showToast("银行开户名需为中文");
|
||||
return false;
|
||||
} else if (this.$u.test.chinese(this.form.bankDepositName) === false) {
|
||||
this.$refs.uToast.show({
|
||||
title: "银行开户行输入错误",
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
if (this.$u.test.chinese(this.form.bankDepositName) === false) {
|
||||
this.showToast("银行开户行需为中文");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -353,16 +401,31 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
page {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.body-view {
|
||||
margin-bottom: 150rpx;
|
||||
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: $page-color-base;
|
||||
}
|
||||
|
||||
.page-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.body-view {
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
@@ -372,11 +435,7 @@ page,
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
@@ -385,78 +444,157 @@ page,
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
|
||||
.goods-img {
|
||||
flex-shrink: 0;
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: $font-color-dark;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
|
||||
.num {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
margin: 0 30rpx;
|
||||
padding: 24rpx 0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
||||
.after-num-label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.opt-tip {
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
padding: 10rpx 30rpx 30rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.opt-view {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
.how-view {
|
||||
}
|
||||
|
||||
.form-block {
|
||||
padding: 0;
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
min-height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.form-row-label {
|
||||
flex-shrink: 0;
|
||||
width: 150rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-row-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
.explain-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
:deep(.u-form-item) {
|
||||
padding: 0 30rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body) {
|
||||
min-height: 100rpx;
|
||||
align-items: center;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__left__content__label) {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__right__content__slot) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.u-input) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.u-input__content) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.u-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-block {
|
||||
padding: 24rpx 30rpx 30rpx;
|
||||
|
||||
.img-title {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.images-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -464,26 +602,50 @@ page,
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.item-apply-voucher {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
justify-content: flex-end;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.form-value {
|
||||
width: 100%;
|
||||
padding-right: 32rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.placeholder {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
|
||||
.desc-item {
|
||||
:deep(.u-form-item__body) {
|
||||
align-items: flex-start;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__left) {
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
:deep(.u-form-item__body__right__content__slot) {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
:deep(.u-input__content__field-wrapper__field) {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
:deep(.u-input__content__field-wrapper__field--placeholder) {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-view {
|
||||
flex-shrink: 0;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,14 +12,19 @@
|
||||
<template v-for="(item,index) in sku.orderItems" :key="index">
|
||||
<view class="goods-item-view" v-if="item.sn == sn" @click="navigateToGoodsDetail(sku.skuId)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
mode="aspectFill"
|
||||
:src="getGoodsImage(item)"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ item.name }}</view>
|
||||
<view class="goods-title">{{ getGoodsName(item) }}</view>
|
||||
<view class="goods-price">
|
||||
<span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
|
||||
<span class="num" v-else>购买数量{{item.num}}</span>
|
||||
<span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
|
||||
<text v-if="sku.orderItems.length <= 1">￥{{ unitPrice(sku.flowPrice) }}</text>
|
||||
<text class="num">购买数量: {{ item.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -28,29 +33,25 @@
|
||||
</view>
|
||||
|
||||
<view class="select-view">
|
||||
<view class="select-cell" v-if="applyInfo.returnGoods" @click="onSelect(1)">
|
||||
<view class="select-cell" v-if="applyInfo.returnGoods" @click="onSelect(1)">
|
||||
<view class="select-image">
|
||||
<image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
|
||||
<image class="select-icon" src="/static/order/t1.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="cell-body">
|
||||
<view class="select-title">退货</view>
|
||||
<view class="select-sub-title">
|
||||
退回收到的商品
|
||||
<u-icon name="arrow-right" color="#bababa"></u-icon>
|
||||
</view>
|
||||
<view class="select-sub-title">退回收到的商品</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#bababa" size="28rpx"></u-icon>
|
||||
</view>
|
||||
<view class="select-cell" v-if="applyInfo.returnMoney" @click="onSelect(3)">
|
||||
<view class="select-cell" v-if="applyInfo.returnMoney" @click="onSelect(3)">
|
||||
<view class="select-image">
|
||||
<image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
|
||||
<image class="select-icon" src="/static/order/t3.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="cell-body">
|
||||
<view class="select-title">退款</view>
|
||||
<view class="select-sub-title">
|
||||
退款商品返还金额
|
||||
<u-icon name="arrow-right" color="#bababa"></u-icon>
|
||||
</view>
|
||||
<view class="select-sub-title">退款商品返还金额</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="#bababa" size="28rpx"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -74,6 +75,13 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
getGoodsName(item) {
|
||||
return item.goodsName || item.name || "";
|
||||
},
|
||||
getGoodsImage(item) {
|
||||
const image = item.image || item.goodsImage || item.thumbnail;
|
||||
return this.parseGoodsImageUrl(image);
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
getAfterSaleInfo(this.sn).then((response) => {
|
||||
@@ -134,69 +142,97 @@ page,
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
|
||||
.goods-img {
|
||||
flex-shrink: 0;
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: $font-color-dark;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
|
||||
.num {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-view {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.select-cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0rpx 20rpx;
|
||||
line-height: 110rpx;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
.select-image {
|
||||
width: 51rpx;
|
||||
height: 110rpx;
|
||||
line-height: 110rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
.select-image {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.select-title {
|
||||
margin-left: 18rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
justify-content: center;
|
||||
|
||||
.select-icon {
|
||||
width: 51rpx;
|
||||
height: 51rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.select-title {
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.select-sub-title {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #cccccc;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,40 +11,35 @@
|
||||
<view class="apply-info-view">
|
||||
<view class="status-info">
|
||||
<view class="status-info-box">
|
||||
<view class="status-val">{{serviceStatusList(serviceDetail.serviceStatus)
|
||||
}}</view>
|
||||
|
||||
<view class="status-tip">{{statusFilter(serviceDetail.serviceStatus)
|
||||
}}</view>
|
||||
<view class="status-val">{{ serviceStatusList(serviceDetail.serviceStatus) }}</view>
|
||||
<view class="status-tip">{{ statusFilter(serviceDetail.serviceStatus) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="log-box-bottom"></view>
|
||||
<view class="log-box-top" @click="onProgress()">
|
||||
<view class="top01">
|
||||
<view>审核日志</view>
|
||||
<view class="log-first-show" v-if="logs[0]">{{
|
||||
logs[0].message
|
||||
}}</view>
|
||||
<view class="log-title">审核日志</view>
|
||||
<view class="log-first-show wes" v-if="logs[0]">{{ logs[0].message }}</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" style="margin-right: 5px" size="30" color="#999"></u-icon>
|
||||
<u-icon name="arrow-right" size="16" color="#999"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="info-box">
|
||||
<view class="goods-item-view" @click="navgiateToGoodsDetail(serviceDetail)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="serviceDetail.goodsImage"></u-image>
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
mode="aspectFill"
|
||||
:src="parseGoodsImageUrl(serviceDetail.goodsImage)"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{
|
||||
serviceDetail.goodsName
|
||||
}}</view>
|
||||
|
||||
<view class="goods-content">
|
||||
<view class="goods-title">{{ serviceDetail.goodsName }}</view>
|
||||
<view class="goods-price">
|
||||
<view class="price"> ￥{{unitPrice(serviceDetail.flowPrice) }}</view>
|
||||
<view>
|
||||
<view>申请售后数量：{{ serviceDetail.num }}</view>
|
||||
</view>
|
||||
<text class="price">￥{{ unitPrice(serviceDetail.flowPrice) }}</text>
|
||||
<text class="num">申请售后数量：{{ serviceDetail.num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -384,13 +379,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
page {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
@@ -400,149 +395,166 @@ page,
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-info-view {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20rpx 30rpx;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
|
||||
.goods-img {
|
||||
flex-shrink: 0;
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: 24rpx;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
color: $font-color-dark;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.price {
|
||||
color: $light-color;
|
||||
|
||||
.price {
|
||||
color: $light-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apply-detail-view {
|
||||
background-color: #f7f7f7;
|
||||
margin-top: 10rpx;
|
||||
padding: 20rpx;
|
||||
color: #666666;
|
||||
|
||||
.detail-item {
|
||||
padding: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.title {
|
||||
padding-left: 10rpx;
|
||||
width: 140rpx;
|
||||
}
|
||||
.value {
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-box-bottom {
|
||||
height: 120rpx;
|
||||
flex-direction: column;
|
||||
background-color: rgb(247, 247, 247);
|
||||
}
|
||||
.log-box-top {
|
||||
height: 153rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
margin-left: 22rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 52rpx;
|
||||
padding-top: 52rpx;
|
||||
padding-left: 32rpx;
|
||||
|
||||
.top01 {
|
||||
width: 90%;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
line-height: 30rpx;
|
||||
color: rgb(46, 45, 45);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
|
||||
.log-first-show {
|
||||
flex-direction: row;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 44rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22rpx;
|
||||
color: rgb(140, 140, 140);
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-info {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
background-color: $light-color;
|
||||
padding: 32rpx 54rpx 56rpx;
|
||||
|
||||
.status-info-box {
|
||||
height: 180rpx;
|
||||
flex-direction: row;
|
||||
padding-left: 54rpx;
|
||||
padding-right: 54rpx;
|
||||
padding-top: 20rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
|
||||
.status-val {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-box-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: -36rpx 22rpx 0;
|
||||
padding: 28rpx 32rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 22rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
.top01 {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-right: 16rpx;
|
||||
|
||||
.log-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.log-first-show {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
padding-right: 40rpx 0rpx;
|
||||
background-color: #eef1f2;
|
||||
}
|
||||
|
||||
.apply-detail-view {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 8rpx 30rpx 30rpx;
|
||||
color: #666666;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
width: 160rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,9 +18,10 @@
|
||||
<view class="name">{{ order.storeName }}</view>
|
||||
|
||||
<view class="name" v-if="renderOrderTag(order.orderPromotionType)">
|
||||
<u-tag
|
||||
:text="renderOrderTag(order.orderPromotionType)"
|
||||
:color="renderOrderTagColor(order.orderPromotionType)"
|
||||
<u-tag
|
||||
:text="renderOrderTag(order.orderPromotionType)"
|
||||
:type="renderOrderTagType(order.orderPromotionType)"
|
||||
size="mini"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -65,10 +66,6 @@
|
||||
取消订单
|
||||
</view>
|
||||
<!-- 等待收货 -->
|
||||
<view ripple shape="circle" class="rebuy-btn" size="mini"
|
||||
v-if="order.allowOperationVO.showLogistics" @click="navigateToLogistics(order)">
|
||||
查看物流
|
||||
</view>
|
||||
<view ripple shape="circle" class="pay-btn" size="mini"
|
||||
v-if="order.allowOperationVO.rog" @click="onRog(order.sn)">
|
||||
确认收货
|
||||
@@ -301,23 +298,18 @@
|
||||
return "";
|
||||
}
|
||||
},
|
||||
renderOrderTagColor(orderPromotionType) {
|
||||
renderOrderTagType(orderPromotionType) {
|
||||
switch (orderPromotionType) {
|
||||
case "NORMAL":
|
||||
return "main";
|
||||
case "PINTUAN":
|
||||
return "red";
|
||||
break;
|
||||
return "error";
|
||||
case "GIFT":
|
||||
return "blue";
|
||||
break;
|
||||
return "primary";
|
||||
case "POINTS":
|
||||
return "black";
|
||||
break;
|
||||
return "info";
|
||||
case "KANJIA":
|
||||
return "pink";
|
||||
return "warning";
|
||||
default:
|
||||
return "";
|
||||
return "info";
|
||||
}
|
||||
},
|
||||
getOrderItemImage(goods, order, index) {
|
||||
@@ -566,15 +558,6 @@
|
||||
url: "/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看物流
|
||||
*/
|
||||
navigateToLogistics(order) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/order/deliverDetail?order_sn=" + order.sn,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -90,11 +90,6 @@
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ sku.num }}</view>
|
||||
|
||||
<view class="good-complaint">
|
||||
<u-tag size="mini" mode="plain" @click="complaint(sku)" v-if="sku.complainStatus == 'NO_APPLY'"
|
||||
text="投诉" type="info" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -195,29 +190,28 @@
|
||||
<view style="padding-bottom: 150rpx"></view>
|
||||
|
||||
<view class="bottom_view">
|
||||
<view class="btn-view u-flex u-row-between">
|
||||
<view class="btn-view">
|
||||
<view class="description">
|
||||
<!-- 全部 -->
|
||||
<!-- 等待付款 -->
|
||||
|
||||
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
|
||||
<text v-else>应付金额：</text>
|
||||
|
||||
<text class="price" v-if="order.priceDetailDTO">￥{{unitPrice(order.priceDetailDTO.flowPrice) }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 全部 -->
|
||||
<!-- 等待付款 -->
|
||||
<u-button type="error" ripple size="mini" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.pay"
|
||||
@click="toPay(order)">立即付款</u-button>
|
||||
|
||||
<!-- <u-button class="rebuy-btn" size="mini" v-if="order.order_operate_allowable_vo.allow_service_cancel"> 提醒发货</u-button> -->
|
||||
<!-- <div class="pay-btn">确认收货</div> -->
|
||||
<u-button shape="circle" ripple type="warning" size="mini" v-if="order.orderStatus == 'DELIVERED'"
|
||||
@click="onRog(order.sn)">确认收货</u-button>
|
||||
<!-- 交易完成 未评价 -->
|
||||
<u-button shape="circle" ripple size="mini" v-if="order.orderStatus == 'COMPLETE'"
|
||||
@click="onComment(order.sn)">评价商品</u-button>
|
||||
<view class="goods-btn">
|
||||
<view
|
||||
class="pay-btn"
|
||||
v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.pay"
|
||||
@click="toPay(order)"
|
||||
>立即付款</view>
|
||||
<view
|
||||
class="pay-btn"
|
||||
v-if="order.orderStatus == 'DELIVERED'"
|
||||
@click="onRog(order.sn)"
|
||||
>确认收货</view>
|
||||
<view
|
||||
class="rebuy-btn"
|
||||
v-if="order.orderStatus == 'COMPLETE'"
|
||||
@click="onComment(order.sn)"
|
||||
>评价商品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -416,18 +410,6 @@ export default {
|
||||
setClipboard(sn)
|
||||
},
|
||||
|
||||
/**
|
||||
* 投诉
|
||||
*/
|
||||
complaint(sku) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order/complain/complain?sn=" +
|
||||
this.sn +
|
||||
"&skuId=" +
|
||||
sku.skuId,
|
||||
});
|
||||
},
|
||||
//售后按钮
|
||||
onAfterSales(sn, sku) {
|
||||
uni.navigateTo({
|
||||
@@ -549,6 +531,15 @@ export default {
|
||||
<style lang="scss">
|
||||
@import "./goods.scss";
|
||||
|
||||
.goods-item-view {
|
||||
.goods-info {
|
||||
.goods-title {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -582,12 +573,15 @@ export default {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
margin-top: 40rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 36rpx;
|
||||
|
||||
>div {
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: normal;
|
||||
margin-top: 8rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -749,22 +743,59 @@ page,
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
.btn-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.price {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.pay-btn,
|
||||
.rebuy-btn {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
padding: 16rpx 36rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
background-color: $main-color;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.rebuy-btn {
|
||||
color: $light-color;
|
||||
border: 1rpx solid $light-color;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: #999999;
|
||||
border-color: #999999;
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<u-navbar :border="false"></u-navbar>
|
||||
<u-navbar
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon="arrow-left"
|
||||
:auto-back="false"
|
||||
@left-click="back"
|
||||
></u-navbar>
|
||||
<step1 v-if="current == 1" :companyData="companyData" @callback="next()" />
|
||||
<step2 v-if="current == 2" :companyData="companyData" @callback="next()" />
|
||||
<step3
|
||||
@@ -32,6 +39,18 @@ export default {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.current > 1) {
|
||||
this.current--;
|
||||
return;
|
||||
}
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({ url: "/pages/tabbar/home/index" });
|
||||
},
|
||||
});
|
||||
},
|
||||
async init(next) {
|
||||
const res = await getCompanyDetail();
|
||||
if (res.data.success) {
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<u-navbar :border="false"></u-navbar>
|
||||
<u-navbar
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<div>
|
||||
<div class="title">店铺入驻</div>
|
||||
<div class="step-list">
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar title="扫码登录授权"></u-navbar>
|
||||
<u-navbar
|
||||
title="扫码登录授权"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<view class="wx-auth-container">
|
||||
<div class="box">
|
||||
<!-- <div v-if="!errorMsg"> -->
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<view class="comment">
|
||||
<u-navbar
|
||||
title="商品评价"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<view class="top-tab">
|
||||
<view class="tab-btn" :v-if="commentDetail">
|
||||
<view class="tab-btn" v-if="commentDetail">
|
||||
<view @click="select(0)" :class="{ cur: selectIndex == 0 }">全部</view>
|
||||
<view @click="select(1)" :class="{ cur: selectIndex == 1 }">好评{{ commentDetail.good }}</view>
|
||||
<view @click="select(2)" :class="{ cur: selectIndex == 2 }">中评{{ commentDetail.moderate }}</view>
|
||||
@@ -9,36 +16,42 @@
|
||||
<view @click="select(4)" :class="{ cur: selectIndex == 4 }">有图{{ commentDetail.haveImage }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评价 -->
|
||||
<div class="goodsBoxOver">
|
||||
<div class="scoll-page">
|
||||
<view class="goodsBoxOver">
|
||||
<view class="scoll-page">
|
||||
<view class="eva-section">
|
||||
<div class="empty" v-if="commDetail.length < 1">
|
||||
<view>
|
||||
<u-empty mode="message" text="赞无评论"></u-empty>
|
||||
</view>
|
||||
</div>
|
||||
<view class="empty" v-if="commDetail.length < 1">
|
||||
<u-empty mode="message" text="暂无评论"></u-empty>
|
||||
</view>
|
||||
<view class="eva-box" v-for="(item, index) in commDetail" :key="index">
|
||||
<view class="section-info">
|
||||
<image class="portrait" :src="item.memberProfile || userImage" mode="aspectFit"></image>
|
||||
<image class="portrait" :src="item.memberProfile || userImage" mode="aspectFill"></image>
|
||||
<view class="star-content">
|
||||
<text class="name">{{noPassByName(item.memberName) }}</text>
|
||||
<text class="name">{{ noPassByName(item.memberName) }}</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="stars">
|
||||
<text :class="{ star: item.deliveryScore > 0 }"></text>
|
||||
<text :class="{ star: item.deliveryScore > 1 }"></text>
|
||||
<text :class="{ star: item.deliveryScore > 2 }"></text>
|
||||
<text :class="{ star: item.deliveryScore > 3 }"></text>
|
||||
<text :class="{ star: item.deliveryScore > 4 }"></text>
|
||||
<text
|
||||
v-for="starIndex in 5"
|
||||
:key="starIndex"
|
||||
class="star-item"
|
||||
:class="{ active: commentScore(item) >= starIndex }"
|
||||
></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section-contant">
|
||||
<div class="content">{{ item.content }}</div>
|
||||
<view class="img">
|
||||
<!-- 循环出用户评价的图片 -->
|
||||
<u-image width="140rpx" height="140rpx" v-if="item.images" v-for="(img, i) in splitImg(item.images)" :src="img" :key="i" @click="preview(splitImg(item.images), i)">
|
||||
</u-image>
|
||||
<view class="content">{{ item.content }}</view>
|
||||
<view class="img-list" v-if="splitImg(item.images)">
|
||||
<u-image
|
||||
v-for="(img, i) in splitImg(item.images)"
|
||||
:key="i"
|
||||
class="comment-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
mode="aspectFill"
|
||||
border-radius="12"
|
||||
:src="img"
|
||||
@click="preview(splitImg(item.images), i)"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="bot">
|
||||
<text class="attr">{{ item.goodsName }} - {{ gradeList[item.grade] }}</text>
|
||||
@@ -46,35 +59,41 @@
|
||||
</view>
|
||||
<view class="commentStyle" v-if="item.reply">
|
||||
商家回复：
|
||||
<span class="addCommentSpan">{{ item.reply }}</span>
|
||||
<view class="img">
|
||||
<!-- 循环出商家回复评价的图片 -->
|
||||
<u-image width="140rpx" height="140rpx" v-if="item.replyImage" v-for="(replyImg, replyIndex) in splitImg(item.replyImage)" :src="replyImg" :key="replyIndex"
|
||||
@click="preview(splitImg( item.replyImage), index)">
|
||||
</u-image>
|
||||
<text class="addCommentSpan">{{ item.reply }}</text>
|
||||
<view class="img-list" v-if="splitImg(item.replyImage)">
|
||||
<u-image
|
||||
v-for="(replyImg, replyIndex) in splitImg(item.replyImage)"
|
||||
:key="replyIndex"
|
||||
class="comment-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
mode="aspectFill"
|
||||
border-radius="12"
|
||||
:src="replyImg"
|
||||
@click="preview(splitImg(item.replyImage), replyIndex)"
|
||||
></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore bg-color="transparent" style="margin:40rpx 0" :status="status" @loadmore="loadmore()" icon-type="iconType" />
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getGoodsDetail } from '@/api/goods.js';
|
||||
import * as membersApi from "@/api/members.js";
|
||||
import configs from '@/config/config'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
configs,
|
||||
status: "loadmore", //底部刷新状态
|
||||
userImage:configs.defaultUserPhoto,
|
||||
commentDetail: "", //评价详情
|
||||
selectIndex: "0", //检索条件
|
||||
params: { // 评论分页提交数据
|
||||
status: "loadmore",
|
||||
userImage: configs.defaultUserPhoto,
|
||||
commentDetail: "",
|
||||
selectIndex: "0",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
grade: "",
|
||||
@@ -85,10 +104,9 @@ export default {
|
||||
WORSE: "差评",
|
||||
HAVEIMAGE: "有图",
|
||||
},
|
||||
// 评论详情
|
||||
commDetail: [],
|
||||
dataTotal: 0, //评论的总total数量
|
||||
opid: "", //上级传参id
|
||||
dataTotal: 0,
|
||||
opid: "",
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
@@ -96,19 +114,17 @@ export default {
|
||||
this.getGoodsCommentsNum(options.id);
|
||||
this.opid = options.id;
|
||||
},
|
||||
|
||||
/**
|
||||
* 触底加载
|
||||
*/
|
||||
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++;
|
||||
this.getGoodsCommentsFun(this.opid);
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 切割图像
|
||||
*/
|
||||
commentScore(item) {
|
||||
return item.descriptionScore || item.deliveryScore || 0;
|
||||
},
|
||||
|
||||
splitImg(val) {
|
||||
if (val && val.split(",")) {
|
||||
return val.split(",");
|
||||
@@ -119,12 +135,8 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取商品评论
|
||||
*/
|
||||
getGoodsCommentsFun(id) {
|
||||
this.status = "loading";
|
||||
// getGoodsComments
|
||||
membersApi.getGoodsComments(id, this.params).then((res) => {
|
||||
if (
|
||||
res.data.result.records == [] ||
|
||||
@@ -140,9 +152,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取商品评论数
|
||||
*/
|
||||
getGoodsCommentsNum(id) {
|
||||
membersApi.getGoodsCommentsCount(id).then((res) => {
|
||||
if (res.statusCode === 200) {
|
||||
@@ -151,9 +160,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 顶部筛选条件
|
||||
*/
|
||||
select(index) {
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
@@ -172,27 +178,23 @@ export default {
|
||||
grade: "",
|
||||
};
|
||||
}
|
||||
// 重新加载评论
|
||||
this.getGoodsCommentsFun(this.opid);
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击图片放大或保存
|
||||
*/
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
fail: function (err) {
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: "保存失败",
|
||||
duration: 2000,
|
||||
@@ -207,74 +209,35 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commentStyle {
|
||||
margin-top: 16rpx;
|
||||
padding: 14rpx 26rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.addCommentSpan {
|
||||
color: $u-tips-color !important;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.img {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* height: 140rpx; */
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
margin: 0 15rpx 15rpx 0;
|
||||
|
||||
&:nth-of-type(3n + 0) {
|
||||
margin: 0 0 15rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodsBoxOver {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.comment {
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
background: #f7f7f7;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.top-tab {
|
||||
margin: 0 20rpx 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30rpx 0 30rpx;
|
||||
padding: 24rpx 24rpx 4rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.tab-btn {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
|
||||
view {
|
||||
min-width: 118rpx;
|
||||
text-align: center;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
padding: 0 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #f8f8fe;
|
||||
border-radius: 25rpx;
|
||||
margin: 0 20rpx 30rpx 0;
|
||||
|
||||
&.cur {
|
||||
background: $aider-light-color;
|
||||
@@ -285,92 +248,117 @@ page {
|
||||
}
|
||||
|
||||
.eva-section {
|
||||
padding: 20rpx 0;
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.eva-box {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 32rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
/* star */
|
||||
.star-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
view {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.section-info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.stars {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.star {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: url("/static/star.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.portrait {
|
||||
flex-shrink: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 100px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.section-contant {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content {
|
||||
font-size: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: 400;
|
||||
color: $font-color-dark;
|
||||
color: #333;
|
||||
padding: 26rpx 0;
|
||||
.star-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-top: 4rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
.stars {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding-top: 8rpx;
|
||||
|
||||
.star-item {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: url("/static/star.png");
|
||||
background-size: 100%;
|
||||
opacity: 0.25;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-contant {
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
padding: 20rpx 0 12rpx;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* height: 140rpx; */
|
||||
overflow: hidden;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $font-sm;
|
||||
color: $font-color-light;
|
||||
margin-top: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
padding-top: 8rpx;
|
||||
|
||||
|
||||
.attr {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commentStyle {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.addCommentSpan {
|
||||
color: $u-tips-color !important;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding-top: 300rpx;
|
||||
color: #999999;
|
||||
padding: 200rpx 0;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
|
||||
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
|
||||
:scroll-top="tabScrollTop" @scroll="pageScroll">
|
||||
<view>
|
||||
<view class="scroll-inner">
|
||||
<!-- 轮播图 -->
|
||||
|
||||
<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
|
||||
@@ -186,11 +186,16 @@
|
||||
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
|
||||
|
||||
<!-- 宝贝详情 -->
|
||||
<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams" :goodsId="goodsDetail.goodsId"
|
||||
v-if="goodsDetail.id" />
|
||||
<GoodsIntro
|
||||
id="main9"
|
||||
:res="goodsDetail"
|
||||
:goodsParams="goodsParams"
|
||||
:goodsId="goodsDetail.goodsId"
|
||||
v-if="goodsDetail.id && (goodsDetail.mobileIntro || (goodsParams && goodsParams.length))"
|
||||
/>
|
||||
|
||||
<!-- 宝贝推荐 -->
|
||||
<GoodsRecommend id="main11" :res="likeGoodsList" />
|
||||
<GoodsRecommend id="main11" v-if="likeGoodsList.length" :res="likeGoodsList" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -422,7 +427,7 @@ export default {
|
||||
pageSize: 10,
|
||||
},
|
||||
|
||||
likeGoodsList: "", //相似商品列表
|
||||
likeGoodsList: [], //相似商品列表
|
||||
PromotionList: "", //活动,促销，列表
|
||||
specList: [],
|
||||
selectedSpec: [],
|
||||
|
||||
@@ -2,27 +2,45 @@
|
||||
<view class="evaluate-box">
|
||||
<view class="eva-section" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
|
||||
<view class="e-header">
|
||||
|
||||
<view class="evaluate-title">评价</view>
|
||||
<text class="evaluate-num">{{ commDetail.total || '0' }}+</text>
|
||||
<text class="tip">好评率 {{ grade || '100' }}%</text>
|
||||
</view>
|
||||
<div v-if="commDetail && commDetail.records && commDetail.records.length > 0">
|
||||
<view class="eva-box" v-for="(commItem,commIndex) in commDetail.records.slice(0,2)" :key="commIndex">
|
||||
<view v-if="commDetail && commDetail.records && commDetail.records.length">
|
||||
<view class="eva-box" v-for="(commItem, commIndex) in commDetail.records.slice(0, 2)" :key="commIndex">
|
||||
<view class="section-info">
|
||||
<u-avatar mode="circle" size="60" class="portrait" :src="commItem.memberProfile"></u-avatar>
|
||||
<u-avatar
|
||||
mode="circle"
|
||||
size="40"
|
||||
class="portrait"
|
||||
:src="commItem.memberProfile"
|
||||
></u-avatar>
|
||||
<view class="star-con">
|
||||
<text class="name">{{noPassByName(commItem.memberName) }}</text>
|
||||
<text class="name">{{ noPassByName(commItem.memberName) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section-contant">
|
||||
<u-read-more ref="uReadMore" :color="lightColor">
|
||||
<rich-text @load="parseLoaded" :nodes="commItem.content " class="con"></rich-text>
|
||||
<u-read-more
|
||||
ref="uReadMore"
|
||||
:color="lightColor"
|
||||
text-indent="0"
|
||||
:show-height="120"
|
||||
>
|
||||
<rich-text @load="parseLoaded(commIndex)" :nodes="commItem.content" class="con"></rich-text>
|
||||
</u-read-more>
|
||||
<scroll-view scroll-x class="scroll-x" v-if="commItem.image">
|
||||
<view class="img">
|
||||
<u-image border-radius="12" class="commImg" width="160rpx" height="160rpx" v-for="(item, index) in commItem.image.split(',')" :src="item" :key="index"
|
||||
@click.stop="previewImg(commItem.image, index)"></u-image>
|
||||
<scroll-view scroll-x class="scroll-x" v-if="commentImages(commItem).length">
|
||||
<view class="img-list">
|
||||
<u-image
|
||||
border-radius="12"
|
||||
class="commImg"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
mode="aspectFill"
|
||||
v-for="(item, index) in commentImages(commItem)"
|
||||
:src="item"
|
||||
:key="index"
|
||||
@click.stop="previewImg(commentImages(commItem), index)"
|
||||
></u-image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="bot">
|
||||
@@ -30,14 +48,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div v-else class="goodsNoMore">
|
||||
<view v-else class="goodsNoMore">
|
||||
<u-empty text="该商品暂无评论" mode="message"></u-empty>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 查看全部评价按钮 -->
|
||||
<view v-if="commDetail && commDetail.records && commDetail.records.length > 0" class="eva-section-btn" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
|
||||
<view
|
||||
v-if="commDetail && commDetail.records && commDetail.records.length"
|
||||
class="eva-section-btn"
|
||||
@click="toComment(goodsDetail.goodsId, goodsDetail.grade)"
|
||||
>
|
||||
<text class="btn-text">查看全部评价</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -49,10 +70,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
// 评论集合
|
||||
commDetail: [],
|
||||
grade: "",
|
||||
// 评论分页提交数据
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -62,7 +81,7 @@ export default {
|
||||
},
|
||||
props: {
|
||||
goodsDetail: {
|
||||
default: {},
|
||||
default: () => ({}),
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
@@ -70,40 +89,47 @@ export default {
|
||||
watch: {
|
||||
goodsDetail: {
|
||||
handler(val) {
|
||||
this.grade = val.grade;
|
||||
this.getGoodsCommentsMethods();
|
||||
if (val && val.goodsId) {
|
||||
this.grade = val.grade;
|
||||
this.getGoodsCommentsMethods();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseLoaded() {
|
||||
this.$refs.uReadMore.init();
|
||||
commentImages(item) {
|
||||
const images = item.images || item.image;
|
||||
if (!images) return [];
|
||||
return typeof images === "string" ? images.split(",").filter(Boolean) : images;
|
||||
},
|
||||
|
||||
// 获取商品评论
|
||||
getGoodsCommentsMethods() {
|
||||
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
|
||||
(res) => {
|
||||
this.commDetail = res.data.result;
|
||||
}
|
||||
);
|
||||
parseLoaded(index) {
|
||||
this.$nextTick(() => {
|
||||
const refs = this.$refs.uReadMore;
|
||||
const target = Array.isArray(refs) ? refs[index] : refs;
|
||||
target && target.init && target.init();
|
||||
});
|
||||
},
|
||||
|
||||
getGoodsCommentsMethods() {
|
||||
if (!this.goodsDetail.goodsId) return;
|
||||
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then((res) => {
|
||||
this.commDetail = res.data.result;
|
||||
});
|
||||
},
|
||||
|
||||
toComment(id, grade) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/comment?id=${id}&grade=${grade}`,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 点击图片放大或保存
|
||||
*/
|
||||
previewImg(url, index) {
|
||||
|
||||
previewImg(urls, index) {
|
||||
uni.previewImage({
|
||||
urls: url,
|
||||
urls,
|
||||
indicator: "number",
|
||||
current: index,
|
||||
});
|
||||
@@ -114,33 +140,31 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../product.scss";
|
||||
.commImg {
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #262626;
|
||||
font-size: 22rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.eva-section-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40rpx 40rpx 50rpx;
|
||||
margin: 2px 0 20rpx 0;
|
||||
padding: 24rpx 0 40rpx;
|
||||
background: #fff;
|
||||
|
||||
.btn-text {
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 46rpx;
|
||||
min-width: 200rpx;
|
||||
height: 56rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
border: 2rpx solid #ededed;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30px;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,30 +173,21 @@ export default {
|
||||
text-align: center;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
/* 评价 */
|
||||
|
||||
.eva-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: #fff;
|
||||
|
||||
.e-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
|
||||
font-size: $font-sm + 2rpx;
|
||||
color: $font-color-light;
|
||||
> .evaluate-num {
|
||||
.evaluate-num {
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
color: $font-color-dark;
|
||||
font-weight: 500;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.tip {
|
||||
flex: 1;
|
||||
@@ -180,55 +195,69 @@ export default {
|
||||
color: #8c8c8c;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon-you {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-x {
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
overflow-x: auto;
|
||||
.scroll-x {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eva-box {
|
||||
padding: 36rpx 0 30rpx 0;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.section-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.portrait {
|
||||
flex-shrink: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 100px;
|
||||
margin-right: 20rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
> .star-con > .name {
|
||||
margin-left: 6rpx;
|
||||
.star-con {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-contant {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 16rpx;
|
||||
|
||||
:deep(.u-read-more__content) {
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
.con {
|
||||
font-size: 26rpx;
|
||||
line-height: 46rpx;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
display: inline-flex;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 0 4rpx;
|
||||
}
|
||||
|
||||
.commImg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.attr {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<view class="detail-box">
|
||||
<view v-if="hasDetailContent">
|
||||
<view class="detail-box" v-if="res.mobileIntro">
|
||||
<view class="goods-detail">
|
||||
<view class="detail_padding">
|
||||
<div class="goods-detail-box">
|
||||
<div class="goods-detail-item goods-active">商品介绍</div>
|
||||
</div>
|
||||
<u-empty
|
||||
class="empty"
|
||||
text="暂无商品介绍"
|
||||
mode="data"
|
||||
v-if="!res.mobileIntro"
|
||||
></u-empty>
|
||||
<u-parse
|
||||
class="vhtml"
|
||||
:lazy-load="true"
|
||||
@@ -22,17 +16,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-box">
|
||||
<view class="detail-box" v-if="goodsParams && goodsParams.length">
|
||||
<view class="goods-detail">
|
||||
<view class="detail_padding">
|
||||
<div class="goods-detail-box">
|
||||
<div class="goods-detail-item goods-active">商品参数</div>
|
||||
</div>
|
||||
<!-- <u-divider>商品参数</u-divider> -->
|
||||
<div class="param-list" v-if="goodsParams.length == 0">
|
||||
<u-empty text="暂无商品参数" mode="list"></u-empty>
|
||||
</div>
|
||||
<div class="param-list" v-else>
|
||||
<div class="param-list">
|
||||
<div
|
||||
class="param-item"
|
||||
v-for="(param, index) in goodsParams"
|
||||
@@ -45,7 +36,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -60,6 +51,11 @@ export default {
|
||||
};
|
||||
},
|
||||
props: ["res", "goodsId", "goodsParams"],
|
||||
computed: {
|
||||
hasDetailContent() {
|
||||
return !!(this.res?.mobileIntro || (this.goodsParams && this.goodsParams.length));
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
let res = await getGoodsMessage(this.goodsId);
|
||||
if (res.data.success) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="recommend-box" >
|
||||
<view class="recommend-box" v-if="res && res.length">
|
||||
<h4 class="goods-recommend-title">热门商品</h4>
|
||||
<goodsList :res='res' v-if="res" :storeName="false" />
|
||||
<goodsList :res='res' :storeName="false" :tabBarGap="false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="group-item-name">还差{{ order.toBeGroupedNum }}人成团</span>
|
||||
</view>
|
||||
<view>
|
||||
<u-button size="mini" :custom-style="customStyle" @click="buy(order)"
|
||||
<u-button size="mini" :custom-style="joinBtnStyle" @click="buy(order)"
|
||||
>去参团</u-button
|
||||
>
|
||||
</view>
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
configs,
|
||||
userImage:configs.defaultUserPhoto,
|
||||
|
||||
customStyle: {
|
||||
joinBtnStyle: {
|
||||
background: this.$lightColor,
|
||||
color: "#fff",
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<div v-for="(promotion, promotion_index) in res" :key="promotion_index">
|
||||
<div v-for="(promotion, promotion_index) in promotionList" :key="promotion_index">
|
||||
<div
|
||||
class="showBox"
|
||||
v-if="
|
||||
@@ -46,7 +46,6 @@
|
||||
goodsFormatPrice(promotion.groupbuy_goods_vo.price)[1]
|
||||
}}</span
|
||||
>
|
||||
<!-- <span v-if="promotion.point">+{{promotion.point}}积分</span> -->
|
||||
</span>
|
||||
<view class="u-group-flex">
|
||||
<span
|
||||
@@ -89,17 +88,16 @@
|
||||
</view>
|
||||
<view class="showBox_R" v-if="promotion && promotion.endTime">
|
||||
<u-tag :text="getIsTimer(promotion)" size="mini" type="error" />
|
||||
<u-count-down
|
||||
:hide-zero-day="true"
|
||||
font-size="25"
|
||||
color="#fff"
|
||||
bg-color="#f71471"
|
||||
separator-size="25"
|
||||
separator-color="#f71471"
|
||||
:show-hours="true"
|
||||
:show-minutes="true"
|
||||
:timestamp="getCountDownTime(promotion.endTime)"
|
||||
></u-count-down>
|
||||
<view class="promotion-countdown" v-if="countdownData[promotion_index]">
|
||||
<text v-if="countdownData[promotion_index].days > 0" class="countdown-day">
|
||||
{{ countdownData[promotion_index].days }}天
|
||||
</text>
|
||||
<text class="countdown-num">{{ padTime(countdownDisplayHours(promotion_index)) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(countdownData[promotion_index].minutes) }}</text>
|
||||
<text class="countdown-colon">:</text>
|
||||
<text class="countdown-num">{{ padTime(countdownData[promotion_index].seconds) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
@@ -111,50 +109,113 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
countdownData: {},
|
||||
countdownTimer: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 活动，促销数据
|
||||
res: {
|
||||
type: null,
|
||||
default: {},
|
||||
},
|
||||
// 商品详情
|
||||
detail: {
|
||||
type: null,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
promotionList() {
|
||||
if (!this.res || typeof this.res !== "object") return [];
|
||||
return Object.keys(this.res).map((key) => ({
|
||||
...(this.res[key] || {}),
|
||||
__key: key.split("-")[0],
|
||||
}));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
res: {
|
||||
handler() {
|
||||
if (this.res && this.res.length != 0) {
|
||||
Object.keys(this.res).forEach((item) => {
|
||||
let key = item.split("-")[0];
|
||||
this.res[item].__key = key;
|
||||
// 针对现实向
|
||||
});
|
||||
}
|
||||
promotionList: {
|
||||
handler(list) {
|
||||
this.refreshCountdown(list);
|
||||
this.startCountdownTimer();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
beforeUnmount() {
|
||||
this.clearCountdownTimer();
|
||||
},
|
||||
methods: {
|
||||
getCountDownTime(val) {
|
||||
let date = new Date(val);
|
||||
let timeSimple = new Date(date).getTime() / 1000;
|
||||
return timeSimple - new Date().getTime() / 1000;
|
||||
clearCountdownTimer() {
|
||||
if (this.countdownTimer) {
|
||||
clearInterval(this.countdownTimer);
|
||||
this.countdownTimer = null;
|
||||
}
|
||||
},
|
||||
startCountdownTimer() {
|
||||
this.clearCountdownTimer();
|
||||
this.countdownTimer = setInterval(() => {
|
||||
this.refreshCountdown(this.promotionList);
|
||||
}, 1000);
|
||||
},
|
||||
refreshCountdown(list = this.promotionList) {
|
||||
const next = {};
|
||||
list.forEach((promotion, index) => {
|
||||
next[index] = this.msToTimeData(this.getCountDownMs(promotion));
|
||||
});
|
||||
this.countdownData = next;
|
||||
},
|
||||
padTime(val) {
|
||||
return String(val ?? 0).padStart(2, "0");
|
||||
},
|
||||
countdownDisplayHours(index) {
|
||||
const data = this.countdownData[index];
|
||||
if (!data) return 0;
|
||||
return data.days * 24 + data.hours;
|
||||
},
|
||||
msToTimeData(ms) {
|
||||
const DAY = 86400000;
|
||||
const HOUR = 3600000;
|
||||
const MINUTE = 60000;
|
||||
const SECOND = 1000;
|
||||
const time = Math.max(Number(ms) || 0, 0);
|
||||
return {
|
||||
days: Math.floor(time / DAY),
|
||||
hours: Math.floor((time % DAY) / HOUR),
|
||||
minutes: Math.floor((time % HOUR) / MINUTE),
|
||||
seconds: Math.floor((time % MINUTE) / SECOND),
|
||||
};
|
||||
},
|
||||
parsePromotionTime(val) {
|
||||
if (val == null || val === "") return 0;
|
||||
if (typeof val === "number" && !Number.isNaN(val)) {
|
||||
return val < 1e12 ? val * 1000 : val;
|
||||
}
|
||||
const text = String(val).trim();
|
||||
if (/^\d+$/.test(text)) {
|
||||
const num = Number(text);
|
||||
return num < 1e12 ? num * 1000 : num;
|
||||
}
|
||||
const parsed = Date.parse(text.replace(/-/g, "/"));
|
||||
return Number.isNaN(parsed) ? 0 : parsed;
|
||||
},
|
||||
getCountDownMs(promotion) {
|
||||
if (!promotion || !promotion.endTime) return 0;
|
||||
const now = Date.now();
|
||||
const startMs = this.parsePromotionTime(promotion.startTime || promotion.start_time);
|
||||
const endMs = this.parsePromotionTime(promotion.endTime);
|
||||
if (!endMs) return 0;
|
||||
const target = startMs && now < startMs ? startMs : endMs;
|
||||
const remain = target - now;
|
||||
return remain > 0 ? remain : 0;
|
||||
},
|
||||
getIsTimer(val) {
|
||||
var timestamp = new Date().getTime();
|
||||
|
||||
if (timestamp < val.start_time) {
|
||||
this.startTimer = true;
|
||||
const now = Date.now();
|
||||
const startMs = this.parsePromotionTime(val.startTime || val.start_time);
|
||||
if (startMs && now < startMs) {
|
||||
return "距离活动开始";
|
||||
} else {
|
||||
return "距离活动结束";
|
||||
}
|
||||
return "距离活动结束";
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
padding: 4rpx 0 !important;
|
||||
background: #ffe7e6 !important;
|
||||
text-align: center !important;
|
||||
position: relative;
|
||||
}
|
||||
::v-deep .u-mode-light-error {
|
||||
border: none;
|
||||
@@ -78,3 +79,33 @@
|
||||
margin-left: 10rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.promotion-countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.countdown-day {
|
||||
font-size: 22rpx;
|
||||
color: #f71471;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.countdown-num {
|
||||
display: inline-block;
|
||||
min-width: 36rpx;
|
||||
padding: 0 4rpx;
|
||||
font-size: 25rpx;
|
||||
color: #fff;
|
||||
background-color: #f71471;
|
||||
border-radius: 4rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.countdown-colon {
|
||||
font-size: 25rpx;
|
||||
color: #f71471;
|
||||
margin: 0 2rpx;
|
||||
}
|
||||
|
||||
@@ -20,14 +20,13 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-recommend">
|
||||
<view class="store-recommend" v-if="recommendGoods.length">
|
||||
<view class="store-recommend-title">店内其他商品</view>
|
||||
<view class="recommend-list">
|
||||
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in res" :key="index">
|
||||
<u-image class="recommend-item-img" :fade="true" duration="450" :lazy-load="true" :src="item.thumbnail" height="218rpx">
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
<template #error><view style="font-size: 24rpx; ">加载失败</view></template>
|
||||
</u-image>
|
||||
<view class="recommend-item" @click="clickGoods(item)" v-for="(item, index) in recommendGoods" :key="item.id || index">
|
||||
<view class="recommend-item-img">
|
||||
<image class="recommend-thumb" :src="item.thumbnail" mode="aspectFill" lazy-load />
|
||||
</view>
|
||||
<view class="recommend-item-name">
|
||||
{{ item.goodsName }}
|
||||
</view>
|
||||
@@ -46,6 +45,11 @@ export default {
|
||||
return {};
|
||||
},
|
||||
props: ["res", "goodsDetail", "storeDetail"],
|
||||
computed: {
|
||||
recommendGoods() {
|
||||
return (this.res || []).filter((item) => item && item.thumbnail && item.goodsName);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 点击商品
|
||||
@@ -82,21 +86,26 @@ export default {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.recommend-item {
|
||||
width: 30%;
|
||||
margin: 10rpx 0rpx;
|
||||
width: calc(33.333% - 12rpx);
|
||||
margin-bottom: 16rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
|
||||
::v-deep .u-image__image {
|
||||
height: 218rpx;
|
||||
border-radius: 12rpx !important;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recommend-item-img {
|
||||
::v-deep .u-image__image {
|
||||
width: 100% !important;
|
||||
}
|
||||
width: 100%;
|
||||
height: 218rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.recommend-thumb {
|
||||
width: 100%;
|
||||
height: 218rpx;
|
||||
display: block;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.recommend-list-view {
|
||||
@@ -168,7 +177,8 @@ export default {
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
gap: 12rpx;
|
||||
|
||||
::v-deep .u-row {
|
||||
width: 100%;
|
||||
@@ -200,8 +210,8 @@ export default {
|
||||
|
||||
.store-recommend {
|
||||
background: #fff;
|
||||
|
||||
margin: 20rpx 0 0 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.goodsNum,
|
||||
.collectionNum {
|
||||
|
||||
@@ -342,6 +342,14 @@ page {
|
||||
.scroll-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.scroll-inner {
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #f0f0f0;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<u-navbar>
|
||||
<u-search placeholder="请输入店铺名称" @search="search" @clear="search" @custom="search" v-model="params.storeName">
|
||||
</u-search>
|
||||
<u-navbar
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon="arrow-left"
|
||||
:auto-back="false"
|
||||
@left-click="back"
|
||||
>
|
||||
<template #center>
|
||||
<view class="search-wrap">
|
||||
<u-search placeholder="请输入店铺名称" @search="search" @clear="search" @custom="search" v-model="params.storeName">
|
||||
</u-search>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<div class="wrapper" v-if="storeList.length!=0">
|
||||
<div class="store-item" @click="handleClickStore(item)" v-for="(item,index) in storeList" :key="index">
|
||||
@@ -73,6 +84,14 @@ export default {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({ url: "/pages/tabbar/home/index" });
|
||||
},
|
||||
});
|
||||
},
|
||||
handleClickStore(val){
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/shopPage?id=${val.id}`
|
||||
@@ -154,4 +173,10 @@ export default {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -2,46 +2,68 @@
|
||||
<view>
|
||||
<!-- 楼层装修店铺信息 -->
|
||||
<div>
|
||||
<u-navbar :border="false">
|
||||
<u-search
|
||||
v-model="keyword"
|
||||
@search="search"
|
||||
@click="search"
|
||||
placeholder="请输入搜索"
|
||||
></u-search>
|
||||
<!-- 基础店铺：返回 + 搜索；楼层装修无顶部搜索时：仅返回 -->
|
||||
<u-navbar
|
||||
v-if="!enablePageData || !floorHasTopSearch"
|
||||
class="shop-navbar"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon=""
|
||||
:auto-back="false"
|
||||
>
|
||||
<template #left>
|
||||
<view class="shop-navbar-inner">
|
||||
<view class="nav-back" @click.stop="back">
|
||||
<u-icon name="arrow-left" size="20"></u-icon>
|
||||
</view>
|
||||
<view v-if="!enablePageData" class="search-wrap" @click.stop>
|
||||
<u-search
|
||||
v-model="keyword"
|
||||
@search="search"
|
||||
@click="search"
|
||||
placeholder="请输入搜索"
|
||||
:show-action="false"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<div class="wrapper">
|
||||
<!-- 店铺信息模块 -->
|
||||
<div class="store flex">
|
||||
<u-image
|
||||
border-radius="10"
|
||||
width="150"
|
||||
height="150"
|
||||
:src="storeInfo.storeLogo || config.logo"
|
||||
mode="aspectFit"
|
||||
>
|
||||
</u-image>
|
||||
<div class="box">
|
||||
<div class="store-name" @click="getStoreLicencePhoto">
|
||||
{{ storeInfo.storeName || "" }}
|
||||
<u-icon style="margin-left: 10rpx" name="arrow-right"></u-icon>
|
||||
</div>
|
||||
<div class="flex store-message">
|
||||
<div>
|
||||
<span>{{ storeInfo.collectionNum || 0 }}</span
|
||||
>关注
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ storeInfo.goodsNum || 0 }}</span
|
||||
>件商品
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection">
|
||||
<div class="collection-btn" @click="whetherCollection">
|
||||
{{ isCollection ? "已关注" : "+ 关注" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="store">
|
||||
<view class="store-logo">
|
||||
<u-image
|
||||
border-radius="10"
|
||||
width="100"
|
||||
height="100"
|
||||
:src="storeInfo.storeLogo || config.logo"
|
||||
mode="aspectFit"
|
||||
>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="store-main">
|
||||
<view class="store-top">
|
||||
<view class="store-name" @click="getStoreLicencePhoto">
|
||||
<text class="store-name-text">{{ storeInfo.storeName || "" }}</text>
|
||||
</view>
|
||||
<view class="collection">
|
||||
<view class="collection-btn" @click.stop="whetherCollection">
|
||||
{{ isCollection ? "已关注" : "+ 关注" }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-message">
|
||||
<view class="store-stat">
|
||||
<text class="stat-num">{{ storeInfo.collectionNum || 0 }}</text>
|
||||
<text class="stat-label">关注</text>
|
||||
</view>
|
||||
<view class="store-stat">
|
||||
<text class="stat-num">{{ storeInfo.goodsNum || 0 }}</text>
|
||||
<text class="stat-label">件商品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
<!-- 店铺简介 -->
|
||||
<div class="store-desc wes-2">
|
||||
@@ -114,16 +136,26 @@
|
||||
<!-- 楼层装修模式 -->
|
||||
<div v-if="enablePageData">
|
||||
<!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
|
||||
<div v-for="(item, index) in pageData.list" :key="index">
|
||||
<div v-for="(item, index) in pageData.list || []" :key="index">
|
||||
<!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
|
||||
<u-navbar
|
||||
class="navbar"
|
||||
class="navbar shop-navbar"
|
||||
v-if="item.type == 'search'"
|
||||
:fixed="index === 1 ? false : true"
|
||||
:placeholder="index === 1 ? false : true"
|
||||
left-icon=""
|
||||
:auto-back="false"
|
||||
>
|
||||
<div class="navbar-right"></div>
|
||||
|
||||
<search style="width: 100%" :res="item.options" :storeId = "storeId"/>
|
||||
<template #left>
|
||||
<view class="shop-navbar-inner">
|
||||
<view class="nav-back" @click.stop="back">
|
||||
<u-icon name="arrow-left" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="floor-search-wrap" @click.stop>
|
||||
<search style="width: 100%" :res="item.options" :storeId="storeId" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<carousel v-if="item.type == 'carousel'" :res="item.options" />
|
||||
<titleLayout v-if="item.type == 'title'" :res="item.options" />
|
||||
@@ -199,7 +231,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
pageData: "", //楼层页面数据
|
||||
pageData: { list: [] }, //楼层页面数据
|
||||
enablePageData: false, //是否显示楼层装修内容
|
||||
basePageData: false, //基础店铺信息
|
||||
scrollTop: 0,
|
||||
@@ -265,6 +297,14 @@ export default {
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
floorHasTopSearch() {
|
||||
const list = this.pageData && this.pageData.list;
|
||||
if (!list || !list.length) return false;
|
||||
return list.some((item, index) => item.type === "search" && index !== 1);
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载
|
||||
*/
|
||||
@@ -302,21 +342,50 @@ export default {
|
||||
this.talkIm(this.storeInfo.storeId)
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack();
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({ delta: 1 });
|
||||
} else {
|
||||
uni.switchTab({ url: "/pages/tabbar/home/index" });
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 实例化首页数据楼层
|
||||
*/
|
||||
initPageData() {
|
||||
this.pageData = "";
|
||||
this.pageData = { list: [] };
|
||||
getFloorStoreData({
|
||||
pageType: "STORE",
|
||||
num: this.storeId,
|
||||
}).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.pageData = JSON.parse(res.data.result.pageData);
|
||||
}
|
||||
});
|
||||
})
|
||||
.then((res) => {
|
||||
const result = res.data && res.data.result;
|
||||
const pageDataStr = result && result.pageData;
|
||||
if (res.data.success && pageDataStr) {
|
||||
try {
|
||||
const parsed = JSON.parse(pageDataStr);
|
||||
this.pageData =
|
||||
parsed && Array.isArray(parsed.list)
|
||||
? parsed
|
||||
: { list: [] };
|
||||
this.enablePageData = true;
|
||||
} catch (e) {
|
||||
this.fallbackToBasePage();
|
||||
}
|
||||
} else {
|
||||
this.fallbackToBasePage();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.fallbackToBasePage();
|
||||
});
|
||||
},
|
||||
fallbackToBasePage() {
|
||||
this.enablePageData = false;
|
||||
this.basePageData = true;
|
||||
this.pageData = { list: [] };
|
||||
this.getGoodsData();
|
||||
this.getCategoryData();
|
||||
},
|
||||
getStoreLicencePhoto() {
|
||||
uni.navigateTo({
|
||||
@@ -414,7 +483,6 @@ export default {
|
||||
if(res.data.result.pageShow == '1'){
|
||||
// 开启了楼层装修店铺
|
||||
this.initPageData();
|
||||
this.enablePageData = true;
|
||||
}
|
||||
else{
|
||||
// 商品信息
|
||||
@@ -514,50 +582,102 @@ export default {
|
||||
}
|
||||
|
||||
.store {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
flex: 2;
|
||||
.store-logo {
|
||||
flex-shrink: 0;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
overflow: hidden;
|
||||
|
||||
> .store-name {
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
letter-spacing: 1rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .store-message {
|
||||
margin-top: 25rpx;
|
||||
|
||||
> div {
|
||||
font-size: 26rpx;
|
||||
margin: 0 5rpx;
|
||||
|
||||
> span {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
:deep(.u-image),
|
||||
:deep(.u-image__image) {
|
||||
width: 100rpx !important;
|
||||
height: 100rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.store-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.store-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 56rpx;
|
||||
}
|
||||
|
||||
.store-name {
|
||||
width: 100%;
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
letter-spacing: 1rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-name-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 0 150rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.store-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.store-stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
white-space: nowrap;
|
||||
margin-right: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.collection {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collection-btn {
|
||||
background: $main-color;
|
||||
padding: 6rpx 0;
|
||||
padding: 8rpx 0;
|
||||
width: 140rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
border-radius: 100px;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.store-desc {
|
||||
@@ -740,4 +860,47 @@ export default {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.shop-navbar {
|
||||
:deep(.u-navbar__content__left) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: auto !important;
|
||||
padding: 0 24rpx 0 8rpx !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-navbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.floor-search-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64rpx;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<u-navbar :title="title"></u-navbar>
|
||||
<u-navbar
|
||||
:title="title"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:border="false"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
<!-- 商品 -->
|
||||
<div class="contant">
|
||||
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||
|
||||
@@ -1,24 +1,34 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<u-navbar :border="false" :title="title">
|
||||
<!-- 中间 -->
|
||||
<view class="slot-wrap container-wrap">
|
||||
<view v-if="search">
|
||||
<u-search @search="searchFun()" @custom="searchFun()" v-model="params.goodsName"></u-search>
|
||||
<u-navbar
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon="arrow-left"
|
||||
:auto-back="false"
|
||||
@left-click="back"
|
||||
>
|
||||
<template #center>
|
||||
<view v-if="search" class="search-wrap">
|
||||
<u-search
|
||||
@search="searchFun()"
|
||||
@custom="searchFun()"
|
||||
v-model="params.goodsName"
|
||||
></u-search>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧 -->
|
||||
<text v-else class="nav-title">{{ title }}</text>
|
||||
</template>
|
||||
<template #right>
|
||||
<view style="margin-right: 24rpx;" @click="searchFlag()">
|
||||
<view v-if="search">取消</view>
|
||||
<u-icon v-if="!search" size="44rpx" name="search"></u-icon>
|
||||
<view class="nav-right" @click="searchFlag()">
|
||||
<text v-if="search">取消</text>
|
||||
<u-icon v-else size="22" name="search"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<!-- 顶部栏 -->
|
||||
<div class='header-wraper'>
|
||||
<image src="/static/join-buy.png"></image>
|
||||
</div>
|
||||
<view class="header-wraper">
|
||||
<image class="header-banner" mode="aspectFit" src="/static/join-buy.png"></image>
|
||||
</view>
|
||||
<!-- 商品栏 -->
|
||||
<div class="swiper">
|
||||
<goodsTemplate v-if="goodsList.length" :res="goodsList" />
|
||||
@@ -56,7 +66,9 @@
|
||||
mounted() {},
|
||||
watch: {
|
||||
search(val) {
|
||||
val ? (this.title = "") : (this.title = "拼团活动");
|
||||
if (!val && !this.title) {
|
||||
this.title = "拼团活动";
|
||||
}
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
@@ -71,6 +83,24 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
back() {
|
||||
if (this.search) {
|
||||
this.search = false;
|
||||
this.params.goodsName = "";
|
||||
this.goodsList = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.GET_AssembleGoods();
|
||||
return;
|
||||
}
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
}
|
||||
},
|
||||
loadMore() {
|
||||
this.params.pageNumber++;
|
||||
this.GET_AssembleGoods();
|
||||
@@ -118,16 +148,37 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-wrap {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.header-wraper {
|
||||
background: url('/static/bg.png');
|
||||
background: url('/static/bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>image{
|
||||
|
||||
.header-banner {
|
||||
width: 188rpx;
|
||||
height: 60rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<u-navbar class="navbar">
|
||||
<view class="slot-wrap">
|
||||
<u-search placeholder="搜索直播间" @custom="searchLive" @clear="clear" @search="searchLive" v-model="keyword"></u-search>
|
||||
</view>
|
||||
<u-navbar
|
||||
class="navbar"
|
||||
:border="false"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon="arrow-left"
|
||||
:auto-back="false"
|
||||
@left-click="back"
|
||||
>
|
||||
<template #center>
|
||||
<view class="slot-wrap">
|
||||
<u-search placeholder="搜索直播间" @custom="searchLive" @clear="clear" @search="searchLive" v-model="keyword"></u-search>
|
||||
</view>
|
||||
</template>
|
||||
</u-navbar>
|
||||
<!-- 轮播图 -->
|
||||
<u-swiper @click="clickSwiper" class="swiper" keyName="image" :list="swiperImg">
|
||||
@@ -120,6 +130,14 @@ export default {
|
||||
this.getLives();
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({ url: "/pages/tabbar/home/index" });
|
||||
},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 点击标签栏切换
|
||||
*/
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<u-navbar :border="false" title="积分商品"></u-navbar>
|
||||
<u-navbar
|
||||
:border="false"
|
||||
title="积分商品"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:auto-back="true"
|
||||
></u-navbar>
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- 积分商品列表 -->
|
||||
|
||||
@@ -17,15 +17,23 @@
|
||||
|
||||
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view class="index-items">
|
||||
<view class="index-item" v-for="(item, key) in nav.goods" :key="key" @click="toGoods(item)">
|
||||
<view class="index-item" v-for="(item, key) in nav.goods" :key="item.id || key" @click="toGoods(item)">
|
||||
<view class="index-item-img">
|
||||
<u-image :src="item.thumbnail" mode="aspectFit">
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
</u-image>
|
||||
<view class="index-item-title">{{ item.goodsName }}</view>
|
||||
<view class="index-item-price flex flex-a-c flex-j-sb">
|
||||
<div class="point"><span>{{ item.points }}</span>积分</div>
|
||||
<span class="tipsMkt">¥{{unitPrice(item.originalPrice) }}</span>
|
||||
<image
|
||||
class="index-item-image"
|
||||
:src="item.thumbnail"
|
||||
mode="aspectFit"
|
||||
lazy-load
|
||||
></image>
|
||||
</view>
|
||||
<view class="index-item-info">
|
||||
<view class="index-item-title">{{ item.goodsName || item.promotionName || '' }}</view>
|
||||
<view class="index-item-price">
|
||||
<view class="point">
|
||||
<text class="point-num">{{ item.points != null ? item.points : 0 }}</text>
|
||||
<text class="point-unit">积分</text>
|
||||
</view>
|
||||
<text class="tipsMkt">¥{{ unitPrice(item.originalPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -194,10 +202,11 @@ page {
|
||||
height: 100%;
|
||||
}
|
||||
.tipsMkt {
|
||||
flex-shrink: 0;
|
||||
color: #c0c4cc;
|
||||
font-size: 24rpx !important;
|
||||
text-decoration: line-through;
|
||||
margin-right: 20rpx !important;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -265,61 +274,84 @@ page {
|
||||
}
|
||||
|
||||
.index-items {
|
||||
padding-top: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
padding: 20rpx 20rpx 0;
|
||||
background-color: #f7f7f7;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.index-item {
|
||||
width: 346rpx;
|
||||
// height: 2100rpx;
|
||||
width: calc(50% - 9rpx);
|
||||
background-color: #fff;
|
||||
margin: 0 18rpx 20rpx 0;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
padding-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.index-item-img {
|
||||
::v-deep .u-image {
|
||||
width: 346rpx !important;
|
||||
height: 320rpx !important;
|
||||
border-radius: 10rpx !important;
|
||||
}
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.index-item-image {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.index-item-info {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.index-item-title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
padding: 0 20rpx;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 3em;
|
||||
color: #333;
|
||||
padding: 16rpx 20rpx 0;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.index-item-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
color: $main-color;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
>.point{
|
||||
>span{
|
||||
font-size: 42rpx;
|
||||
font-weight: bold;
|
||||
margin-right:10rpx;
|
||||
}
|
||||
color: #ff3c2a;
|
||||
padding: 12rpx 20rpx 20rpx;
|
||||
|
||||
.point {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.point-num {
|
||||
font-size: 42rpx;
|
||||
font-weight: bold;
|
||||
color: #ff3c2a;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.point-unit {
|
||||
margin-left: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ff3c2a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,6 +37,9 @@ export default {
|
||||
height: 300rpx;
|
||||
background: url("/static/point-bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.point {
|
||||
font-size: 40rpx;
|
||||
@@ -48,13 +51,17 @@ export default {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.point-wrapper {
|
||||
padding-top: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.whether-point {
|
||||
color: #fff;
|
||||
margin-left: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,15 @@
|
||||
<template>
|
||||
<view class="sale">
|
||||
<u-navbar title='限时抢购'></u-navbar>
|
||||
<u-navbar
|
||||
title="限时抢购"
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
left-icon="arrow-left"
|
||||
:auto-back="false"
|
||||
@left-click="back"
|
||||
></u-navbar>
|
||||
<view class="header-wraper">
|
||||
<image mode="widthFix" src="/static/seckill.png"></image>
|
||||
<image class="header-banner" mode="aspectFit" src="/static/seckill.png"></image>
|
||||
</view>
|
||||
<scroll-view scroll-x>
|
||||
<view class="index-navs">
|
||||
@@ -86,6 +93,16 @@
|
||||
this._setTimeInterval && clearInterval(this._setTimeInterval);
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取时间线商品
|
||||
*/
|
||||
@@ -168,14 +185,17 @@
|
||||
}
|
||||
|
||||
.header-wraper {
|
||||
background: url('/static/bg.png');
|
||||
background: url('/static/bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>image{
|
||||
|
||||
.header-banner {
|
||||
width: 300rpx;
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user