UI优化
This commit is contained in:
parent
6c4235de50
commit
27198b347c
|
|
@ -284,8 +284,14 @@ class MiniProgramPlatform extends BasePlatform {
|
|||
handler: () => { }
|
||||
};
|
||||
|
||||
// 将客服菜单插入到第二个位置
|
||||
return [...baseMenuList.slice(0, 1), customServiceMenu, ...baseMenuList.slice(1)];
|
||||
// 将客服菜单插入到用户协议后面
|
||||
const agreementIndex = baseMenuList.findIndex(item => item.title === '用户协议');
|
||||
if (agreementIndex !== -1) {
|
||||
baseMenuList.splice(agreementIndex + 1, 0, customServiceMenu);
|
||||
return baseMenuList;
|
||||
}
|
||||
// 兜底：放到末尾
|
||||
return [...baseMenuList, customServiceMenu];
|
||||
}
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
|
|
|
|||
|
|
@ -198,6 +198,14 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mall/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/coupon",
|
||||
"style": {
|
||||
|
|
|
|||
489
honey_box/pages/mall/detail.vue
Normal file
489
honey_box/pages/mall/detail.vue
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
<template>
|
||||
<view class="mall-detail">
|
||||
<!-- 顶部导航 -->
|
||||
<uni-nav-bar left-icon="left" title="商品详情" color="#000000" backgroundColor="#fff" :fixed="true"
|
||||
:statusBar="true" :border="false" @clickLeft="goBack"></uni-nav-bar>
|
||||
|
||||
<view class="detail-content-wrap">
|
||||
<!-- 商品主图 -->
|
||||
<view class="goods-banner">
|
||||
<image :src="goodsInfo.imgurl_detail || goodsInfo.imgurl" mode="widthFix" class="banner-img"></image>
|
||||
</view>
|
||||
|
||||
<!-- 价格区域 -->
|
||||
<view class="price-section">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{ goodsInfo.price }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 商品标题 -->
|
||||
<view class="title-section">
|
||||
<text class="goods-title">{{ goodsInfo.title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<view class="info-section">
|
||||
<view class="info-row">
|
||||
<text class="info-label">库存</text>
|
||||
<text class="info-value">{{ goodsInfo.stock || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-section" v-if="orderData && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
|
||||
<view class="info-row">
|
||||
<text class="info-label">{{ $config.getAppSetting('currency2_name') }}{{ goodsInfo.price * 100 }}</text>
|
||||
<text class="info-value info-sub">(剩余:{{ orderData.use_integral }})</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 售前售后须知 -->
|
||||
<view class="info-section" @click="showRule = true">
|
||||
<view class="info-row">
|
||||
<text class="info-label">售前·售后须知</text>
|
||||
<text class="info-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情 -->
|
||||
<view class="detail-section" v-if="goodsInfo.goods_describe">
|
||||
<text class="detail-title">商品详情</text>
|
||||
<view class="detail-content">
|
||||
<rich-text :nodes="goodsInfo.goods_describe"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部占位 -->
|
||||
<view style="height: 180rpx;"></view>
|
||||
</view>
|
||||
|
||||
<!-- 底部购买按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<view class="buy-btn" @click="onBuy">
|
||||
<text v-if="orderData && orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
|
||||
{{ goodsInfo.price * 100 }}{{ $config.getAppSetting('currency2_name') }} 立即兑换
|
||||
</text>
|
||||
<text v-else>¥{{ goodsInfo.price }} 立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 售前售后弹窗 -->
|
||||
<uni-popup ref="rulePop" type="bottom">
|
||||
<view class="rule-popup">
|
||||
<view class="rule-popup-hd">
|
||||
<text>售前·售后须知</text>
|
||||
<view @click="$refs.rulePop.close()" class="rule-close">✕</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="rule-popup-body">
|
||||
<rich-text :nodes="sendRuleData"></rich-text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 确认订单弹窗 -->
|
||||
<uni-popup ref="orderPop" type="bottom">
|
||||
<view v-if="orderData" class="order-popup">
|
||||
<view class="order-popup-hd">
|
||||
<view style="width: 24rpx;"></view>
|
||||
<text>确认订单</text>
|
||||
<view class="rule-close" @click="$refs.orderPop.close()">✕</view>
|
||||
</view>
|
||||
<view class="order-card">
|
||||
<image :src="orderData.goods.imgurl_detail || orderData.goods.imgurl"
|
||||
style="width: 190rpx; height: 190rpx; border-radius: 10rpx;" mode="aspectFill"></image>
|
||||
<view class="order-card-info">
|
||||
<text class="hang1" style="font-size: 28rpx; color: #333;">{{ orderData.goods.title }}</text>
|
||||
<view class="order-card-price">
|
||||
<text style="color: #333; font-size: 28rpx;">¥{{ orderData.goods.price }}</text>
|
||||
<text style="color: #999; font-size: 24rpx;">×{{ orderData.goods.prize_num }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="pay-methods">
|
||||
<view class="pay-method-item" @click="zhifu = 0"
|
||||
v-if="orderData.goods_extend && orderData.goods_extend.pay_wechat == 1">
|
||||
<text style="color: #333;">微信支付</text>
|
||||
<image :src="zhifu == 0 ? $img1('common/check_act.png') : $img1('common/check.png')"
|
||||
style="width: 32rpx; height: 32rpx;"></image>
|
||||
</view>
|
||||
<view class="pay-method-item" @click="zhifu = 1"
|
||||
v-if="orderData.goods_extend && orderData.goods_extend.pay_currency2 == 1">
|
||||
<text style="color: #333;">{{ $config.getAppSetting('currency2_name') }}
|
||||
{{ orderData.goods.price * 100 }} (剩余:{{ orderData.use_integral }})</text>
|
||||
<image :src="zhifu == 1 ? $img1('common/check_act.png') : $img1('common/check.png')"
|
||||
style="width: 32rpx; height: 32rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 规则 -->
|
||||
<view class="order-rule" v-if="sendRuleData">
|
||||
<scroll-view scroll-y style="max-height: 160rpx;">
|
||||
<rich-text :nodes="sendRuleData" style="font-size: 20rpx; color: #999;"></rich-text>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 协议 -->
|
||||
<view class="order-agree" @click="isAgree = !isAgree">
|
||||
<image :src="isAgree ? $img1('common/check_act.png') : $img1('common/check.png')"
|
||||
style="width: 32rpx; height: 32rpx; margin-right: 10rpx;"></image>
|
||||
<text>我已满18岁,阅读并同意</text>
|
||||
<text style="color: #1e88e5;" @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">《用户协议》</text>
|
||||
<text style="color: #1e88e5;" @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">《隐私政策》</text>
|
||||
</view>
|
||||
|
||||
<!-- 支付按钮 -->
|
||||
<view class="order-pay-btn" @click="confirmPay">
|
||||
<text v-if="zhifu == 0">¥{{ orderData.price }}</text>
|
||||
<text v-if="zhifu == 1">{{ orderData.price * 100 }}{{ $config.getAppSetting('currency2_name') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { calcMallOrderMoney, createOrder, createMallOrder } from '@/common/server/order.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsId: '',
|
||||
goodsInfo: {},
|
||||
orderData: null,
|
||||
sendRuleData: '',
|
||||
zhifu: 0,
|
||||
isAgree: true,
|
||||
showRule: false
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.goods_id) {
|
||||
this.goodsId = options.goods_id;
|
||||
this.loadDetail();
|
||||
}
|
||||
this.$c.getRule(10).then(res => {
|
||||
if (res.status == 1) this.sendRuleData = res.data;
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
showRule(val) {
|
||||
if (val) {
|
||||
this.$refs.rulePop.open();
|
||||
this.showRule = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
async loadDetail() {
|
||||
// 用 mall_ordermoney 获取商品详情和支付信息
|
||||
const res = await calcMallOrderMoney({
|
||||
prize_num: 1,
|
||||
goods_id: this.goodsId,
|
||||
num: 1,
|
||||
});
|
||||
if (res.status == 1) {
|
||||
this.orderData = res.data;
|
||||
this.goodsInfo = res.data.goods || {};
|
||||
const ext = res.data.goods_extend || {};
|
||||
if (ext.pay_wechat == 1) {
|
||||
this.zhifu = 0;
|
||||
} else if (ext.pay_currency2 == 1) {
|
||||
this.zhifu = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onBuy() {
|
||||
if (!this.orderData) return;
|
||||
this.$refs.orderPop.open();
|
||||
},
|
||||
|
||||
async confirmPay() {
|
||||
if (!this.isAgree) {
|
||||
this.$c.msg('请先同意用户协议');
|
||||
return;
|
||||
}
|
||||
if (this.zhifu == 0) {
|
||||
await this.payByWechat();
|
||||
} else {
|
||||
await this.payByCurrency();
|
||||
}
|
||||
},
|
||||
|
||||
async payByWechat() {
|
||||
const data = {
|
||||
goods_id: this.goodsId,
|
||||
prize_num: 1,
|
||||
num: 1,
|
||||
use_money_is: 2,
|
||||
use_integral_is: 2,
|
||||
coupon_id: '',
|
||||
use_money2_is: 2
|
||||
};
|
||||
const res = await createOrder(data);
|
||||
if (res.status == 1) {
|
||||
this.$refs.orderPop.close();
|
||||
if (res.data.status == 1) {
|
||||
const status = await this.$platform.pay({ data: res.data.res }, this);
|
||||
if (status == 'success') {
|
||||
this.$c.msg('购买成功');
|
||||
this.loadDetail();
|
||||
}
|
||||
} else {
|
||||
this.$c.toast({ title: res.msg, duration: 500, success: () => this.loadDetail() });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async payByCurrency() {
|
||||
const pri = this.goodsInfo.price * 100;
|
||||
if (this.orderData.use_integral < pri) {
|
||||
this.$c.msg(this.$config.getAppSetting('currency2_name') + '不足');
|
||||
return;
|
||||
}
|
||||
const res = await createMallOrder({ goods_id: this.goodsId, prize_num: 1 });
|
||||
if (res.status == 1) {
|
||||
this.$refs.orderPop.close();
|
||||
if (res.data.status == 1) {
|
||||
const status = await this.$platform.pay({ data: res.data.res }, this);
|
||||
if (status == 'success') {
|
||||
this.$c.msg('购买成功');
|
||||
this.loadDetail();
|
||||
}
|
||||
} else {
|
||||
this.$c.toast({ title: res.msg, duration: 500, success: () => this.loadDetail() });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mall-detail {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-banner {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.price-section {
|
||||
padding: 30rpx 30rpx 10rpx;
|
||||
background: #fff;
|
||||
|
||||
.price-symbol {
|
||||
font-size: 28rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 52rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.title-section {
|
||||
padding: 10rpx 30rpx 30rpx;
|
||||
background: #fff;
|
||||
|
||||
.goods-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-top: 2rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
background: #fff;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-sub {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.info-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
.buy-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #5CE5D5;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-popup {
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
max-height: 70vh;
|
||||
|
||||
.rule-popup-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rule-popup-body {
|
||||
padding: 0 30rpx 60rpx;
|
||||
max-height: 50vh;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-close {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-popup {
|
||||
background: #f7f7f7;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 0 30rpx;
|
||||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||||
|
||||
.order-popup-hd {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.order-card-info {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.order-card-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-methods {
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.pay-method-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-rule {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
background: #F9F8E1;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.order-agree {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-pay-btn {
|
||||
margin-top: 30rpx;
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
background: #5CE5D5;
|
||||
border-radius: 42rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -244,28 +244,10 @@ export default {
|
|||
},
|
||||
|
||||
|
||||
async order_money(data) {
|
||||
console.log(234);
|
||||
this.goodsId = data.id;
|
||||
// API: mall_ordermoney
|
||||
const res = await calcMallOrderMoney({
|
||||
prize_num: 1,
|
||||
goods_id: data.id,
|
||||
num: 1,
|
||||
order_money(data) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/detail?goods_id=' + data.id
|
||||
});
|
||||
|
||||
if (res.status == 1) {
|
||||
this.orderData = res.data;
|
||||
this.zhifu = 0;
|
||||
// 使用 goods_extend（API 返回的下划线命名）
|
||||
const goodsExtend = this.orderData.goods_extend || {};
|
||||
if (goodsExtend.pay_wechat == 1) {
|
||||
this.zhifu = 0;
|
||||
} else if (goodsExtend.pay_currency2 == 1) {
|
||||
this.zhifu = 1;
|
||||
}
|
||||
this.$refs.pop.open();
|
||||
}
|
||||
},
|
||||
|
||||
close(e) {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{ top: statusBarHeight + 'px' }" @tap="jumapSlots()">
|
||||
<view class="flex column" style="width: 100%">
|
||||
<view class="navLeft" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: navBgColor }">
|
||||
<view class="navLeft-top" @tap="jumapSlots()">
|
||||
<view class="title1 row" style="height: 64rpx; margin-top: 5rpx;">
|
||||
<image src="/static/icon_1.png" style="width: 36rpx; height: 36rpx;" mode=""></image>
|
||||
<text>真实概率</text>
|
||||
|
|
@ -14,31 +14,17 @@
|
|||
</image>
|
||||
<text>官方真品</text>
|
||||
</view>
|
||||
|
||||
<text style="font-size: 36rpx; margin-top: 30rpx;">哈尼盲盒</text>
|
||||
|
||||
<!-- 抽奖广播 -->
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 100rpx; position: relative; display: flex; align-items: center; justify-content: center; margin-top: 10rpx;">
|
||||
<view class=""
|
||||
style="width: 88rpx; height: 88rpx; background-color: #1e88e5; position: absolute; border-radius: 50%; left: 0rpx;">
|
||||
|
||||
</view>
|
||||
<image class="" :src="$img1('common/reward_notice.png')"
|
||||
style="width: 84rpx; height: 94rpx; position: absolute; right: 0rpx;">
|
||||
</image>
|
||||
<view class="row"
|
||||
style="width: 566rpx; height: 72rpx; background: radial-gradient(circle at center, #FFE95B 0%, #FFC402 100%);">
|
||||
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="position: absolute; left: 100rpx; font-size: 26rpx; font-weight: bold; color: #FFCC00; text-shadow: 1px 1px 0 #5a4a2a, -1px -1px 0 #5a4a2a, 1px -1px 0 #5a4a2a, -1px 1px 0 #5a4a2a; text-align: left;">用户123456抽中了一等级的限定盲盒！</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 抽奖广播（独立定位） -->
|
||||
<view class="broadcast-bar" :style="{ top: (statusBarHeight + broadcastTop) + 'px' }">
|
||||
<view style="width: 88rpx; height: 88rpx; background-color: #1e88e5; position: absolute; border-radius: 50%; left: 30rpx;"></view>
|
||||
<image :src="$img1('common/reward_notice.png')" style="width: 84rpx; height: 94rpx; position: absolute; right: 30rpx;"></image>
|
||||
<view class="row" style="width: 566rpx; height: 72rpx; background: radial-gradient(circle at center, #FFE95B 0%, #FFC402 100%);"></view>
|
||||
<text style="position: absolute; left: 130rpx; font-size: 26rpx; font-weight: bold; color: #FFCC00; text-shadow: 1px 1px 0 #5a4a2a, -1px -1px 0 #5a4a2a, 1px -1px 0 #5a4a2a, -1px 1px 0 #5a4a2a; text-align: left;">用户123456抽中了一等级的限定盲盒！</text>
|
||||
</view>
|
||||
<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
|
||||
@up="loadData">
|
||||
|
|
@ -57,16 +43,22 @@
|
|||
</view>
|
||||
|
||||
<!-- 今日推荐 -->
|
||||
<view class="flex yqhy" v-if="tuijian.length > 0" style="margin-top: 30rpx; flex-direction: column">
|
||||
<!-- <image class="img100" style=" display: flex; justify-content: center;"
|
||||
:src="$img1('/image/a6548-pw1cx.webp')"></image> -->
|
||||
<text style="color: black; font-weight: 600; margin-bottom: 20rpx">今日推荐</text>
|
||||
<view class="flex row align-center"
|
||||
style="width: 100%; height: 260rpx; padding: 20rpx 15rpx; box-sizing: border-box; justify-content: space-between; overflow-x: auto; overflow-y: visible;">
|
||||
<view v-for="(item, index) in tuijian" class="recommend_item" :key="index">
|
||||
<image class="" style="width: 200rpx; height: 200rpx; border-radius: 10rpx" :src="item.imgurl"
|
||||
@click="$c.navTo(item, index)"></image>
|
||||
</view>
|
||||
<view class="recommend-section" v-if="tuijian.length > 0">
|
||||
<image class="recommend-title-img" src="/static/ic_recommend.png" mode="heightFix"></image>
|
||||
<swiper class="recommend-swiper" :current="tuijianCurrent" @change="onTuijianChange"
|
||||
:display-multiple-items="1" :circular="tuijianPages.length > 1">
|
||||
<swiper-item v-for="(page, pIndex) in tuijianPages" :key="pIndex">
|
||||
<view class="recommend-page">
|
||||
<view v-for="(item, index) in page" :key="index" class="recommend_item"
|
||||
@click="$c.navTo(item, index)">
|
||||
<image class="recommend_img" :src="item.imgurl" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="recommend-dots" v-if="tuijianPages.length > 1">
|
||||
<view v-for="(page, i) in tuijianPages" :key="i"
|
||||
class="recommend-dot" :class="{ active: tuijianCurrent === i }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="tab" scroll-x>
|
||||
|
|
@ -86,7 +78,7 @@
|
|||
<!-- <view class="redu" v-if="item.join_count">
|
||||
<text>{{ item.join_count }}次参与</text>
|
||||
</view> -->
|
||||
<view class="redu">快去参与吧！</view>
|
||||
<!-- <view class="redu">快去参与吧！</view> -->
|
||||
<view class="qbt_con_item_3 flex_center" style="margin-top: 24rpx">
|
||||
<view class="item-price">
|
||||
￥<text>{{ item.price }}</text>
|
||||
|
|
@ -191,12 +183,15 @@
|
|||
},
|
||||
advert: [], //轮播图
|
||||
tuijian: [], //推荐上新
|
||||
tuijianCurrent: 0, //推荐轮播当前页
|
||||
aa: false,
|
||||
gonggao: "",
|
||||
couponData: "",
|
||||
canGetCoupon: false,
|
||||
swCur: 0,
|
||||
statusBarHeight
|
||||
statusBarHeight,
|
||||
navBgColor: 'transparent',
|
||||
broadcastTop: 60
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -237,6 +232,15 @@
|
|||
this.canGetCoupon = true;
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
const scrollTop = e.scrollTop;
|
||||
if (scrollTop > 10) {
|
||||
this.navBgColor = '#E9F5F7';
|
||||
} else {
|
||||
this.navBgColor = 'transparent';
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
let imageUrl = this.$config.getShareImageUrl();
|
||||
return {
|
||||
|
|
@ -247,7 +251,14 @@
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
// 删除getBallStyle和getPopupStyle方法
|
||||
// 将推荐数据按每3个一组分页
|
||||
tuijianPages() {
|
||||
const pages = [];
|
||||
for (let i = 0; i < this.tuijian.length; i += 3) {
|
||||
pages.push(this.tuijian.slice(i, i + 3));
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 删除BallClick和getFloatBall方法
|
||||
|
|
@ -270,6 +281,9 @@
|
|||
swChange(e) {
|
||||
this.swCur = e.detail.current;
|
||||
},
|
||||
onTuijianChange(e) {
|
||||
this.tuijianCurrent = e.detail.current;
|
||||
},
|
||||
|
||||
async receiveCoupon() {
|
||||
let arr = this.couponData.goods.list.map((item) => item.id);
|
||||
|
|
@ -410,26 +424,87 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recommend-section {
|
||||
width: 686rpx;
|
||||
margin: 30rpx auto 0;
|
||||
}
|
||||
|
||||
.recommend-title-img {
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.recommend-swiper {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.recommend-page {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.recommend_item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
flex: 0 0 auto;
|
||||
background-color: gray;
|
||||
margin-right: 40rpx;
|
||||
border-radius: 10rpx;
|
||||
// 今日推荐条目四周阴影
|
||||
box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.3);
|
||||
width: 210rpx;
|
||||
height: 210rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.recommend_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.recommend-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16rpx 0 0;
|
||||
}
|
||||
|
||||
.recommend-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #d8d8d8;
|
||||
margin: 0 8rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.active {
|
||||
background-color: #666;
|
||||
width: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
>view {
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
.navLeft-top {
|
||||
padding: 0 30rpx 10rpx;
|
||||
}
|
||||
|
||||
.broadcast-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pop {
|
||||
|
|
@ -593,6 +668,7 @@
|
|||
align-items: center;
|
||||
border-radius: 16rpx;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.news-text {
|
||||
width: 600rpx;
|
||||
|
|
@ -605,6 +681,34 @@
|
|||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 左侧渐变遮罩
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50rpx;
|
||||
top: 0;
|
||||
width: 100rpx;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #E4F4F8, transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
border-radius: 16rpx 0 0 16rpx;
|
||||
}
|
||||
|
||||
// 右侧渐变遮罩
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100rpx;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left, #E4F4F8, transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav1 {
|
||||
|
|
@ -631,12 +735,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.yqhy {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
// .yqhy 已废弃，使用 .recommend-section 替代
|
||||
|
||||
.nav2 {
|
||||
width: 710rpx;
|
||||
|
|
@ -826,7 +925,7 @@
|
|||
|
||||
.qbt_con_item {
|
||||
width: 330rpx;
|
||||
height: 505rpx;
|
||||
height: 485rpx;
|
||||
margin-top: 30rpx;
|
||||
// border: 1px solid #4a4951;
|
||||
position: relative;
|
||||
|
|
@ -917,8 +1016,8 @@
|
|||
|
||||
.list_2 {
|
||||
padding: 28rpx 20rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
|
@ -937,12 +1036,11 @@
|
|||
// text-shadow: 0px 2px 8px rgba(233, 18, 252, 0.41);
|
||||
|
||||
.item-price {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
background-color: #DFFF76;
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
background-color: #FCFE7C;
|
||||
padding: 5rpx 22rpx;
|
||||
border-radius: 0rpx 20rpx 0rpx 20rpx;
|
||||
|
||||
text {
|
||||
|
|
|
|||
|
|
@ -173,10 +173,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getUser } from '@/common/server/user.js';
|
||||
import { receiveCoupon } from '@/common/server/coupon.js';
|
||||
import { receiveTaskReward } from '@/common/server/welfare.js';
|
||||
|
||||
import {
|
||||
getUser
|
||||
} from '@/common/server/user.js';
|
||||
import {
|
||||
receiveCoupon
|
||||
} from '@/common/server/coupon.js';
|
||||
import {
|
||||
receiveTaskReward
|
||||
} from '@/common/server/welfare.js';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
|
|
@ -338,15 +344,15 @@
|
|||
console.log("money字段:", res.data?.userinfo?.money);
|
||||
console.log("money2字段:", res.data?.userinfo?.money2);
|
||||
console.log("integral字段:", res.data?.userinfo?.integral);
|
||||
|
||||
|
||||
if (res.status == 1) {
|
||||
this.userinfo = res.data.userinfo
|
||||
this.taskList = res.data.taskList || []
|
||||
|
||||
|
||||
console.log("=== 赋值后 this.userinfo ===");
|
||||
console.log("this.userinfo:", JSON.stringify(this.userinfo));
|
||||
console.log("this.userinfo.money:", this.userinfo?.money);
|
||||
|
||||
|
||||
uni.setStorageSync('userinfo', this.userinfo)
|
||||
uni.setStorageSync('corpid', res.data.other?.corpid)
|
||||
}
|
||||
|
|
@ -384,7 +390,9 @@
|
|||
}, 100);
|
||||
return;
|
||||
}
|
||||
this.$c.to({ url });
|
||||
this.$c.to({
|
||||
url
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 格式化数字，如果小数部分是.00则只显示整数部分
|
||||
|
|
@ -559,8 +567,8 @@
|
|||
width: 100%;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -578,8 +586,8 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
|
|
|||
BIN
honey_box/static/ic_recommend.png
Normal file
BIN
honey_box/static/ic_recommend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -747,11 +747,15 @@ public class OrderService : IOrderService
|
|||
{
|
||||
g.Id,
|
||||
g.Title,
|
||||
g.ImgUrl,
|
||||
g.ImgUrlDetail,
|
||||
g.Type,
|
||||
g.Price,
|
||||
g.Stock,
|
||||
g.SaleStock,
|
||||
g.Status,
|
||||
g.IsShouZhe
|
||||
g.IsShouZhe,
|
||||
g.GoodsDescribe
|
||||
})
|
||||
.FirstOrDefaultAsync();
|
||||
|
||||
|
|
@ -795,11 +799,15 @@ public class OrderService : IOrderService
|
|||
{
|
||||
Id = goods.Id,
|
||||
Title = goods.Title,
|
||||
ImgUrl = FormatImageUrl(goods.ImgUrl),
|
||||
ImgUrlDetail = FormatImageUrl(goods.ImgUrlDetail),
|
||||
Price = goods.Price.ToString("0.##"),
|
||||
Stock = goods.Stock,
|
||||
SaleStock = goods.SaleStock,
|
||||
Type = goods.Type,
|
||||
IsShouZhe = goods.IsShouZhe,
|
||||
PrizeNum = request.PrizeNum
|
||||
PrizeNum = request.PrizeNum,
|
||||
GoodsDescribe = goods.GoodsDescribe
|
||||
},
|
||||
GoodsExtend = goodsExtend
|
||||
};
|
||||
|
|
|
|||
|
|
@ -293,6 +293,9 @@ public class GoodsInfoDto
|
|||
[JsonPropertyName("title")]
|
||||
public string Title { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("imgurl")]
|
||||
public string ImgUrl { get; set; } = string.Empty;
|
||||
|
||||
[JsonPropertyName("imgurl_detail")]
|
||||
public string ImgUrlDetail { get; set; } = string.Empty;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,10 +47,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" id="goods_describe_div">
|
||||
<label class="layui-form-label">盒子描述</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="goods_describe" placeholder="请输入盒子描述"
|
||||
autocomplete="off" class="layui-input" style="width: 600px">
|
||||
<label class="layui-form-label">商品详情</label>
|
||||
<div class="layui-input-block" style="width: 900px;">
|
||||
<script type="text/plain" name="goods_describe" id="goods_describe_editor" style="height:400px;width:100%"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
|
|
@ -308,6 +307,9 @@
|
|||
</div>
|
||||
</div>
|
||||
{include file="Public:footer"/}
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer', 'form', 'upload', 'laydate'], function () {
|
||||
var $ = layui.$;
|
||||
|
|
@ -593,6 +595,9 @@
|
|||
}
|
||||
});
|
||||
|
||||
// 初始化富文本编辑器
|
||||
var goodsDescribeEditor = UE.getEditor('goods_describe_editor');
|
||||
|
||||
// 首抽五折切换事件
|
||||
form.on('radio(shou_zhe)', function (data) {
|
||||
// 仅记录选择，不做界面显示变化
|
||||
|
|
@ -649,6 +654,10 @@
|
|||
function check() {
|
||||
var url = "{:url('/admin/goods_add')}";
|
||||
var $ = layui.$;
|
||||
// 同步UEditor内容到表单
|
||||
if (typeof UE !== 'undefined' && UE.getEditor('goods_describe_editor')) {
|
||||
UE.getEditor('goods_describe_editor').sync();
|
||||
}
|
||||
var load = layer.load(2);
|
||||
$.post(url, $("form").serialize(), function (data) {
|
||||
if (data.status == 1) {
|
||||
|
|
|
|||
|
|
@ -51,11 +51,9 @@
|
|||
</div>
|
||||
|
||||
<div class="layui-form-item" id="goods_describe_div">
|
||||
<label class="layui-form-label">盒子描述</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="goods_describe" placeholder="请输入盒子描述"
|
||||
value="{$info.goods_describe}" autocomplete="off" class="layui-input"
|
||||
style="width: 600px">
|
||||
<label class="layui-form-label">商品详情</label>
|
||||
<div class="layui-input-block" style="width: 900px;">
|
||||
<script type="text/plain" name="goods_describe" id="goods_describe_editor" style="height:400px;width:100%">{$info.goods_describe|raw}</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
|
|
@ -314,6 +312,9 @@
|
|||
</div>
|
||||
</div>
|
||||
{include file="Public:footer"/}
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
|
||||
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
|
||||
<script type="text/javascript">
|
||||
layui.use(['layer', 'form', 'upload', 'laydate'], function () {
|
||||
var $ = layui.$;
|
||||
|
|
@ -589,6 +590,9 @@
|
|||
}
|
||||
});
|
||||
|
||||
// 初始化富文本编辑器
|
||||
var goodsDescribeEditor = UE.getEditor('goods_describe_editor');
|
||||
|
||||
//执行实例
|
||||
upload.render({
|
||||
accept: 'imgurl'
|
||||
|
|
@ -639,6 +643,10 @@
|
|||
function check() {
|
||||
var url = "{:url('/admin/goods_edit')}";
|
||||
var $ = layui.$;
|
||||
// 同步UEditor内容到表单
|
||||
if (typeof UE !== 'undefined' && UE.getEditor('goods_describe_editor')) {
|
||||
UE.getEditor('goods_describe_editor').sync();
|
||||
}
|
||||
var load = layer.load(2);
|
||||
$.post(url, $("form").serialize(), function (data) {
|
||||
if (data.status == 1) {
|
||||
|
|
|
|||
2
server/scripts/alter_goods_describe.sql
Normal file
2
server/scripts/alter_goods_describe.sql
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
-- 将 goods_describe 字段从 varchar(300) 改为 text，以支持富文本HTML内容
|
||||
ALTER TABLE `goods` MODIFY COLUMN `goods_describe` text DEFAULT NULL COMMENT '商品详情(富文本)';
|
||||
Loading…
Reference in New Issue
Block a user