所有页面css 规范
This commit is contained in:
hupeng committed
1 parent
50fbcfe27b
commit
b168232fbb
30 files changed
+5026
-3580
No files matched your search
@@ -5,40 +5,40 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="cart-popup">
|
||||
<view class="top flex justify-between">
|
||||
<view class="cart-page">
|
||||
<view class="cart-page__header flex justify-between">
|
||||
<text>已点{{ getCartGoodsNumber }}份</text>
|
||||
<text @tap="handleCartClear">清空</text>
|
||||
</view>
|
||||
<scroll-view class="cart-list" scroll-y>
|
||||
<view class="wrapper">
|
||||
<scroll-view class="cart-page__list" scroll-y>
|
||||
<view class="cart-page__list-inner">
|
||||
<uv-empty mode="car" v-if="cart.length == 0"></uv-empty>
|
||||
<view class="item" v-for="(item, index) in cart" :key="index">
|
||||
<view class="left">
|
||||
<view class="name">{{ item.name }}</view>
|
||||
<view class="props">{{ item.valueStr }}</view>
|
||||
<view class="cart-item" v-for="(item, index) in cart" :key="index">
|
||||
<view class="cart-item__info">
|
||||
<view class="cart-item__name">{{ item.name }}</view>
|
||||
<view class="cart-item__props">{{ item.valueStr }}</view>
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="cart-item__price">
|
||||
<text>￥{{ item.price }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<button type="default" plain size="mini" class="btn" hover-class="none"
|
||||
<view class="cart-item__controls">
|
||||
<button type="default" plain size="mini" class="cart-item__btn" hover-class="none"
|
||||
@tap="handleCartItemReduce(index)">
|
||||
<view class="iconfont iconsami-select"></view>
|
||||
</button>
|
||||
<view class="number">{{ item.number }}</view>
|
||||
<button type="primary" class="btn" size="min" hover-class="none"
|
||||
<view class="cart-item__qty">{{ item.number }}</view>
|
||||
<button type="primary" class="cart-item__btn" size="min" hover-class="none"
|
||||
@tap="handleCartItemAdd(index)">
|
||||
<view class="iconfont iconadd-select"></view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="fixed-bottom flex justify-between align-center bg-white ">
|
||||
<view class="mx-2 ont-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
|
||||
<view><uv-button type="warning" color="#09b4f1" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
|
||||
<view class="fixed-bottom flex justify-between align-center bg-white">
|
||||
<view class="mx-2 font-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
|
||||
<view><uv-button type="primary" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
|
||||
</view>
|
||||
<uv-toast ref="uToast"></uv-toast>
|
||||
</template>
|
||||
@@ -150,96 +150,111 @@ const toPay = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cart-popup {
|
||||
.top {
|
||||
background-color: $bg-color-primary;
|
||||
//color: $color-primary;
|
||||
color: #5A5B5C;
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
}
|
||||
.cart-list {
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 1vh;
|
||||
max-height: 60vh;
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 156rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: $border-color;
|
||||
height: 2rpx;
|
||||
transform: scaleY(0.6);
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-base;
|
||||
}
|
||||
.props {
|
||||
color: $text-color-assist;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-right: 120rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: $font-size-base;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
text-align: center;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 购物车页局部 token（与 uni.scss 全局变量配合）
|
||||
$cart-list-max-height: 60vh;
|
||||
$cart-list-min-height: 1vh;
|
||||
$cart-list-bottom-space: 156rpx;
|
||||
$cart-price-offset: 120rpx;
|
||||
$cart-control-size: 46rpx;
|
||||
$cart-divider-height: 2rpx;
|
||||
$cart-header-color: #5a5b5c;
|
||||
$cart-gap-sm: 10rpx;
|
||||
|
||||
.cart-page {
|
||||
--cart-control-size: #{$cart-control-size};
|
||||
--cart-list-max-height: #{$cart-list-max-height};
|
||||
|
||||
&__header {
|
||||
padding: $cart-gap-sm $spacing-row-lg;
|
||||
font-size: $font-size-sm;
|
||||
text-align: right;
|
||||
color: $cart-header-color;
|
||||
background-color: $bg-color-primary;
|
||||
}
|
||||
|
||||
&__list {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: $cart-list-min-height;
|
||||
max-height: var(--cart-list-max-height);
|
||||
background-color: $text-color-white;
|
||||
}
|
||||
|
||||
&__list-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0 $spacing-row-lg;
|
||||
margin-bottom: $cart-list-bottom-space;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacing-row-lg 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $cart-divider-height;
|
||||
background-color: $border-color;
|
||||
transform: scaleY(0.6);
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin-right: $spacing-row-lg;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-base;
|
||||
}
|
||||
|
||||
&__props {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-assist;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__price {
|
||||
margin-right: $cart-price-offset;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__btn,
|
||||
&__qty {
|
||||
width: var(--cart-control-size);
|
||||
height: var(--cart-control-size);
|
||||
line-height: var(--cart-control-size);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
padding: 0;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
&__qty {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,61 +5,57 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="form-box">
|
||||
<view class="form">
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input">
|
||||
<view class="label">收货人</view>
|
||||
<input class="input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input">
|
||||
<view class="label">联系方式</view>
|
||||
<input class="input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input">
|
||||
<view class="label">收货地址</view>
|
||||
<view class="input" @click="chooseLocation">{{form.address ? form.address : '请选择收货地址'}}</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input">
|
||||
<view class="label">详细地址</view>
|
||||
<input class="input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input">
|
||||
<view class="label">默认地址</view>
|
||||
<view class="radio-group">
|
||||
<view class="radio" :class="{'checked': !form.isDefault}" style="margin-right: 10rpx;" @tap="form.isDefault=0">否</view>
|
||||
<view class="radio" :class="{'checked': form.isDefault}" @tap="form.isDefault=1">是</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<view class="container address-form">
|
||||
<list-cell :hover="false">
|
||||
<view class="address-form__field">
|
||||
<view class="address-form__label">收货人</view>
|
||||
<input class="address-form__input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
<view class="btn-section">
|
||||
<button type="primary" size="default" @tap="save">保存</button>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="address-form__field">
|
||||
<view class="address-form__label">联系方式</view>
|
||||
<input class="address-form__input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="address-form__field">
|
||||
<view class="address-form__label">收货地址</view>
|
||||
<view class="address-form__input" @click="chooseLocation">{{ form.address ? form.address : '请选择收货地址' }}</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="address-form__field">
|
||||
<view class="address-form__label">详细地址</view>
|
||||
<input class="address-form__input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="address-form__field">
|
||||
<view class="address-form__label">默认地址</view>
|
||||
<view class="address-form__radio-group">
|
||||
<view class="address-form__radio" :class="{ 'address-form__radio--checked': !form.isDefault }" @tap="form.isDefault = 0">否</view>
|
||||
<view class="address-form__radio" :class="{ 'address-form__radio--checked': form.isDefault }" @tap="form.isDefault = 1">是</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<view class="address-form__actions">
|
||||
<button type="primary" size="default" class="rounded-pill address-form__btn" @tap="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { formatDateTime,prePage } from '@/utils/util'
|
||||
import {
|
||||
getAddressAddAndEdit
|
||||
getAddressAddAndEdit
|
||||
} from '@/api/address'
|
||||
const main = useMainStore()
|
||||
const { isLogin,addresses } = storeToRefs(main)
|
||||
@@ -116,67 +112,79 @@ const chooseLocation = async() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30rpx;
|
||||
$address-form-padding: $spacing-row-lg;
|
||||
$address-form-label-width: 200rpx;
|
||||
$address-form-radio-padding-y: 10rpx;
|
||||
$address-form-radio-padding-x: $spacing-row-lg;
|
||||
$address-form-radio-gap: 10rpx;
|
||||
$address-form-radio-border-width: 2rpx;
|
||||
$address-form-btn-height: 90rpx;
|
||||
$address-form-btn-width: 85%;
|
||||
|
||||
.address-form {
|
||||
--address-form-label-width: #{$address-form-label-width};
|
||||
--address-form-btn-height: #{$address-form-btn-height};
|
||||
--address-form-btn-width: #{$address-form-btn-width};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $address-form-padding;
|
||||
color: $text-color-base;
|
||||
|
||||
&__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $text-color-base;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
width: var(--address-form-label-width);
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 200rpx;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-color-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
&__input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__radio-group {
|
||||
display: flex;
|
||||
gap: $address-form-radio-gap;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
&__radio {
|
||||
padding: $address-form-radio-padding-y $address-form-radio-padding-x;
|
||||
border: $address-form-radio-border-width solid $text-color-assist;
|
||||
border-radius: $border-radius-base;
|
||||
color: $text-color-assist;
|
||||
font-size: $font-size-base;
|
||||
|
||||
.radio {
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 2rpx solid $text-color-assist;
|
||||
color: $text-color-assist;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.checked {
|
||||
background-color: $color-primary;
|
||||
color: $text-color-white;
|
||||
border: 2rpx solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
font-size: $font-size-base;
|
||||
height: 90rpx;
|
||||
border-radius: 50rem !important;
|
||||
width: 85%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&--checked {
|
||||
border-color: $color-primary;
|
||||
background-color: $color-primary;
|
||||
color: $text-color-white;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--address-form-btn-width);
|
||||
height: var(--address-form-btn-height);
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +1,74 @@
|
||||
<template>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
<template>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="main">
|
||||
<view class="container address-page">
|
||||
<view class="address-page__main">
|
||||
<uv-empty v-if="addresses.length == 0" mode="address"></uv-empty>
|
||||
<template v-else>
|
||||
<uv-swipe-action>
|
||||
<uv-swipe-action-item class="address-wrapper" :options="swipeOption"
|
||||
<uv-swipe-action-item class="address-page__item" :options="swipeOption"
|
||||
@click="handleSwipeClick(address.id)" v-for="(address, index) in addresses" :key="index">
|
||||
<view class="address" @tap="chooseAddress(address)">
|
||||
<view class="left flex-fill overflow-hidden mr-20">
|
||||
<view class="font-size-lg font-weight-bold text-truncate"
|
||||
style="margin-bottom: 10rpx;white-space:normal;">
|
||||
<view class="address-page__card" @tap="chooseAddress(address)">
|
||||
<view class="flex-fill overflow-hidden mr-20">
|
||||
<view class="address-page__detail font-size-lg font-weight-bold text-truncate">
|
||||
{{ address.address + ' ' + address.detail }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{ address.realName }} {{ address.isDefault ? '默认' : '' }} {{ address.phone }}
|
||||
</view>
|
||||
</view>
|
||||
<image src="/static/images/edit.png" class="edit-icon" @tap.stop="edit(address.id)"></image>
|
||||
<image src="/static/images/edit.png" class="address-page__edit-icon" @tap.stop="edit(address.id)"></image>
|
||||
</view>
|
||||
</uv-swipe-action-item>
|
||||
</uv-swipe-action>
|
||||
</template>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<button type="primary" size="default" @tap="add">新增地址</button>
|
||||
<view class="address-page__footer">
|
||||
<button type="primary" size="default" class="rounded-pill address-page__btn" @tap="add">新增地址</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
ref,
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { formatDateTime,prePage } from '@/utils/util'
|
||||
import {
|
||||
addressAll,
|
||||
addressDelete,
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { formatDateTime,prePage } from '@/utils/util'
|
||||
import {
|
||||
addressAll,
|
||||
addressDelete,
|
||||
shopGetDistanceFromLocation
|
||||
} from '@/api/address'
|
||||
const main = useMainStore()
|
||||
const { isLogin,addresses,store } = storeToRefs(main)
|
||||
const title = ref('我的地址')
|
||||
|
||||
const scene = ref('menu')
|
||||
const is_choose = ref(false)
|
||||
const swipeOption = ref(
|
||||
[{
|
||||
} from '@/api/address'
|
||||
const main = useMainStore()
|
||||
const { isLogin,addresses,store } = storeToRefs(main)
|
||||
const title = ref('我的地址')
|
||||
|
||||
const scene = ref('menu')
|
||||
const is_choose = ref(false)
|
||||
const swipeOption = ref([{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#D12E32'
|
||||
backgroundColor: '#D12E32' // $color-error
|
||||
}
|
||||
}])
|
||||
|
||||
onLoad((option) => {
|
||||
console.log('option:',option)
|
||||
is_choose.value = option.is_choose || false
|
||||
scene.value = option.scene || 'menu'
|
||||
})
|
||||
onShow(() => {
|
||||
init();
|
||||
})
|
||||
|
||||
}])
|
||||
|
||||
onLoad((option) => {
|
||||
console.log('option:',option)
|
||||
is_choose.value = option.is_choose || false
|
||||
scene.value = option.scene || 'menu'
|
||||
})
|
||||
onShow(() => {
|
||||
init();
|
||||
})
|
||||
|
||||
const init = async() => {
|
||||
let data = await addressAll();
|
||||
if (data) {
|
||||
@@ -90,25 +88,25 @@ const edit = (id) => {
|
||||
const handleSwipeClick = async(id) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let data = await addressDelete({
|
||||
id: id
|
||||
});
|
||||
if (data) {
|
||||
const index = addresses.value.findIndex(item => item.id == id)
|
||||
const newaddresses = JSON.parse(JSON.stringify(addresses.value))
|
||||
newaddresses.splice(index, 1)
|
||||
main.SET_ADDRESSES(newaddresses)
|
||||
uni.showToast({
|
||||
title: '删除成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
content: '确定要删除？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
let data = await addressDelete({
|
||||
id: id
|
||||
});
|
||||
if (data) {
|
||||
const index = addresses.value.findIndex(item => item.id == id)
|
||||
const newaddresses = JSON.parse(JSON.stringify(addresses.value))
|
||||
newaddresses.splice(index, 1)
|
||||
main.SET_ADDRESSES(newaddresses)
|
||||
uni.showToast({
|
||||
title: '删除成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
// if (res && res.confirm) {
|
||||
@@ -118,8 +116,8 @@ const handleSwipeClick = async(id) => {
|
||||
const chooseAddress = async(address) => {
|
||||
if (!is_choose.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
console.log('scene.value:',scene.value)
|
||||
|
||||
if (scene.value == 'menu' || scene.value == 'pay') {
|
||||
@@ -133,10 +131,10 @@ const chooseAddress = async(address) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (parseFloat(data) > store.value.distance) {
|
||||
uni.showToast({
|
||||
title: '不在配送范围！',
|
||||
icon: 'error'
|
||||
if (parseFloat(data) > store.value.distance) {
|
||||
uni.showToast({
|
||||
title: '不在配送范围！',
|
||||
icon: 'error'
|
||||
})
|
||||
return;
|
||||
}
|
||||
@@ -161,70 +159,80 @@ const chooseAddress = async(address) => {
|
||||
main.SET_ADDRESS(address)
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
$address-padding: $spacing-row-lg;
|
||||
$address-item-gap: $spacing-row-lg;
|
||||
$address-card-padding-y: 40rpx;
|
||||
$address-main-padding-bottom: 100rpx;
|
||||
$address-footer-height: 100rpx;
|
||||
$address-footer-padding-y: 10rpx;
|
||||
$address-btn-height: 80rpx;
|
||||
$address-btn-width: 80%;
|
||||
$address-edit-icon-size: 50rpx;
|
||||
$address-detail-gap: 10rpx;
|
||||
$address-footer-shadow: 0 0 20rpx rgba($text-color-assist, 0.1);
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
.address-page {
|
||||
--address-edit-icon-size: #{$address-edit-icon-size};
|
||||
--address-btn-height: #{$address-btn-height};
|
||||
--address-btn-width: #{$address-btn-width};
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.address-wrapper {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
width: 100%;
|
||||
padding: 40rpx 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
padding: $address-padding;
|
||||
padding-bottom: $address-main-padding-bottom;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
height: 100rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
|
||||
&__item {
|
||||
margin-bottom: $address-item-gap;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: $address-card-padding-y $address-padding;
|
||||
background-color: $text-color-white;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
margin-bottom: $address-detail-gap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&__edit-icon {
|
||||
flex-shrink: 0;
|
||||
width: var(--address-edit-icon-size);
|
||||
height: var(--address-edit-icon-size);
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
height: 80rpx;
|
||||
width: 80%;
|
||||
border-radius: 50rem !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
height: $address-footer-height;
|
||||
padding: $address-footer-padding-y 0;
|
||||
background-color: $text-color-white;
|
||||
box-shadow: $address-footer-shadow;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--address-btn-width);
|
||||
height: var(--address-btn-height);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,49 +5,44 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view>
|
||||
<view class="wrap">
|
||||
<view class="bill-page">
|
||||
<view class="bill-page__body">
|
||||
<view class="bg-white" v-if="cate == 0">
|
||||
<uv-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
|
||||
<uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
|
||||
</view>
|
||||
<view class="bg-white" v-else>
|
||||
<uv-tabs activeColor="#f29100" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
|
||||
<uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
|
||||
</view>
|
||||
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
||||
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in orderList" :key="index">
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
||||
<view class="page-box">
|
||||
<swiper class="bill-page__swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
||||
<swiper-item class="bill-page__swiper-item" v-for="(item, index) in orderList" :key="index">
|
||||
<scroll-view scroll-y class="bill-page__scroll" @scrolltolower="reachBottom">
|
||||
<view class="bill-page__content">
|
||||
<view v-if="item.length == 0">
|
||||
<view class="centre" v-if="loadStatus[index] != 'loading'">
|
||||
<view class="explain">
|
||||
<view class="bill-empty" v-if="loadStatus[index] != 'loading'">
|
||||
<view class="bill-empty__text">
|
||||
您还没有相关的账单
|
||||
<view class="tips">可以去看看有那些想买的</view>
|
||||
<view class="bill-empty__tips">可以去看看有那些想买的</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<view class="bill-empty__btn">
|
||||
<navigator open-type="switchTab" url="/pages/menu/menu">随便逛逛</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
|
||||
<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="order" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
|
||||
<view class="type">
|
||||
<view class="bill-item" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
|
||||
<view class="bill-item__meta">
|
||||
<view>{{res.title}}</view>
|
||||
<view>{{res.mark}}</view>
|
||||
</view>
|
||||
<view class="total">
|
||||
<view>
|
||||
{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元
|
||||
</view>
|
||||
<view>
|
||||
{{formatDateTime(res.createTime)}}
|
||||
</view>
|
||||
<view class="bill-item__amount">
|
||||
<view>{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元</view>
|
||||
<view>{{formatDateTime(res.createTime)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
|
||||
<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -58,16 +53,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
watch
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import { formatDateTime } from '@/utils/util'
|
||||
import {
|
||||
balanceGetBillList
|
||||
balanceGetBillList
|
||||
} from '@/api/user'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -107,6 +102,10 @@ const pageSize = ref(20)
|
||||
const tabs = ref()
|
||||
const cate = ref(0)
|
||||
|
||||
// 与下方 SCSS token 保持一致，供模板组件颜色属性使用
|
||||
const balanceTabActiveColor = '#f29100'
|
||||
const balancePageBg = '#f2f2f2'
|
||||
|
||||
onLoad((option) => {
|
||||
console.log('cate:',option.cate)
|
||||
cate.value = option.cate
|
||||
@@ -154,76 +153,109 @@ const animationfinish = ({ detail }) => {
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
$balance-page-bg: #f2f2f2;
|
||||
|
||||
/* #ifndef H5 */
|
||||
page {
|
||||
height: 100%;
|
||||
background-color: #f2f2f2;
|
||||
background-color: $balance-page-bg;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order {
|
||||
width: 710rpx;
|
||||
background-color: #ffffff;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.total {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
|
||||
.total-price {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
float: right;
|
||||
// 账单页局部 token（与 uni.scss 全局变量配合；$balance-page-bg 与上方及 script 常量保持一致）
|
||||
$balance-page-bg: #f2f2f2;
|
||||
$balance-tab-active: #f29100;
|
||||
$balance-card-width: 710rpx;
|
||||
$balance-card-radius: 20rpx;
|
||||
$balance-card-padding: $spacing-row-base;
|
||||
$balance-card-gap: $spacing-row-base;
|
||||
$balance-empty-margin-top: 200rpx;
|
||||
$balance-empty-btn-width: 200rpx;
|
||||
$balance-empty-btn-radius: 32rpx;
|
||||
$balance-empty-btn-height: 64rpx;
|
||||
$balance-empty-image-size: 164rpx;
|
||||
$balance-gradient-start: #f9745a;
|
||||
$balance-gradient-end: #ff9e01;
|
||||
|
||||
.bill-page {
|
||||
--balance-page-bg: #{$balance-page-bg};
|
||||
--balance-tab-active: #{$balance-tab-active};
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top));
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
&__swiper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
}
|
||||
.centre {
|
||||
text-align: center;
|
||||
margin: 200rpx auto;
|
||||
font-size: 32rpx;
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&__swiper-item {
|
||||
height: 100%;
|
||||
}
|
||||
.tips {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 200rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 64rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
|
||||
|
||||
&__scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top));
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
width: $balance-card-width;
|
||||
margin: $balance-card-gap auto;
|
||||
padding: $balance-card-padding;
|
||||
font-size: $font-size-base;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $balance-card-radius;
|
||||
|
||||
&__meta,
|
||||
&__amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
}
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
|
||||
.bill-empty {
|
||||
margin: $balance-empty-margin-top auto;
|
||||
font-size: $font-size-lg;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: $balance-empty-image-size;
|
||||
height: $balance-empty-image-size;
|
||||
margin-bottom: $balance-card-gap;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
&__tips {
|
||||
margin-top: $balance-card-gap;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-assist;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: $balance-empty-btn-width;
|
||||
margin: 80rpx auto;
|
||||
font-size: 26rpx;
|
||||
line-height: $balance-empty-btn-height;
|
||||
color: $text-color-white;
|
||||
border-radius: $balance-empty-btn-radius;
|
||||
background: linear-gradient(270deg, $balance-gradient-start 0%, $balance-gradient-end 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,85 +5,89 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container position-relative w-100 h-100 overflow-hidden">
|
||||
<view class="exchange-box">
|
||||
<view class="input-box">
|
||||
<view class="container coupons-page position-relative w-100 h-100 overflow-hidden">
|
||||
<view class="coupons-exchange">
|
||||
<view class="coupons-exchange__input">
|
||||
<uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabbar">
|
||||
<view class="tab" :class="{active: activeTabIndex == index}"
|
||||
v-for="(item, index) in tabs" :key="index" @tap="handleTab(index)">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="coupons-tabbar">
|
||||
<view
|
||||
class="coupons-tab"
|
||||
:class="{ 'coupons-tab--active': activeTabIndex == index }"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
@tap="handleTab(index)"
|
||||
>
|
||||
<view class="coupons-tab__title">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-fill">
|
||||
<scroll-view scroll-y class="coupon-list" @scrolltolower="getCoupons(activeTabIndex)">
|
||||
<view class="wrapper" v-if="0 === activeTabIndex">
|
||||
<scroll-view scroll-y class="coupons-list" @scrolltolower="getCoupons(activeTabIndex)">
|
||||
<view class="coupons-list__wrapper" v-if="0 === activeTabIndex">
|
||||
<uv-empty v-if="myCoupons.length == 0" mode="list"></uv-empty>
|
||||
<view class="coupon" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
|
||||
<view class="taobao">
|
||||
<view class="ticket">
|
||||
<view class="left">
|
||||
<view class="coupons-item" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
|
||||
<view class="coupons-ticket">
|
||||
<view class="coupons-ticket__body">
|
||||
<view class="coupons-ticket__left">
|
||||
<image
|
||||
class="picture"
|
||||
class="coupons-ticket__picture"
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
<view class="coupons-ticket__intro">
|
||||
<view class="coupons-ticket__value">
|
||||
￥
|
||||
<text class="big">{{item.value}}</text>
|
||||
<text class="coupons-ticket__amount">{{item.value}}</text>
|
||||
<view>
|
||||
满{{item.least}}减{{item.value}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="type">{{ item.title }}</view>
|
||||
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
|
||||
<view class="coupons-ticket__type">{{ item.title }}</view>
|
||||
<view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="" v-if="activeTabIndex == 1">
|
||||
<view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view>
|
||||
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
|
||||
<view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="receive(item, index)">立即领取</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view>
|
||||
<view v-else class="used">已使用</view>
|
||||
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
|
||||
<view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper" v-if="1 === activeTabIndex">
|
||||
<view class="coupons-list__wrapper" v-if="1 === activeTabIndex">
|
||||
<uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty>
|
||||
<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
|
||||
<view class="taobao">
|
||||
<view class="">
|
||||
<view class="left">
|
||||
<view class="coupons-item" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
|
||||
<view class="coupons-ticket">
|
||||
<view class="coupons-ticket__body">
|
||||
<view class="coupons-ticket__left">
|
||||
<image
|
||||
class="picture"
|
||||
class="coupons-ticket__picture"
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
<view class="coupons-ticket__intro">
|
||||
<view class="coupons-ticket__value">
|
||||
￥
|
||||
<text class="big">{{item.value}}</text>
|
||||
<text class="coupons-ticket__amount">{{item.value}}</text>
|
||||
<view>
|
||||
满{{item.least}}减{{item.value}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="type">{{ item.title }}</view>
|
||||
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
|
||||
<view class="coupons-ticket__type">{{ item.title }}</view>
|
||||
<view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="" v-if="activeTabIndex == 1">
|
||||
<!-- <view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view> -->
|
||||
<view class="use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)" >立即领取</view>
|
||||
<view v-else class="used immediate-use">已领取</view>
|
||||
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
|
||||
<view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)">立即领取</view>
|
||||
<view v-else class="coupons-ticket__btn coupons-ticket__btn--used immediate-use">已领取</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view>
|
||||
<view v-else class="used">已使用</view>
|
||||
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
|
||||
<view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -121,9 +125,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
watch
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -132,7 +136,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
couponReceive,
|
||||
couponMine,
|
||||
couponIndexApi
|
||||
couponIndexApi
|
||||
} from '@/api/coupon'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -269,216 +273,212 @@ const receive = async(coupon,index) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 优惠券页局部 token（与 uni.scss 全局变量配合）
|
||||
$coupons-exchange-height: 100rpx;
|
||||
$coupons-exchange-input-width: 70%;
|
||||
$coupons-tabbar-height: 80rpx;
|
||||
$coupons-tab-indicator-height: 5rpx;
|
||||
$coupons-tab-title-padding-y: 15rpx;
|
||||
$coupons-list-offset-nav: 120rpx;
|
||||
$coupons-list-offset-header: 200rpx;
|
||||
$coupons-list-padding-x: $spacing-row-base;
|
||||
$coupons-item-gap: $spacing-row-lg;
|
||||
$coupons-item-radius: $border-radius-base;
|
||||
$coupons-notch-size: 30rpx;
|
||||
$coupons-notch-offset: 65rpx;
|
||||
$coupons-ticket-radius: 20rpx;
|
||||
$coupons-ticket-divider: $border-color-light;
|
||||
$coupons-ticket-left-width: 70%;
|
||||
$coupons-ticket-right-width: 30%;
|
||||
$coupons-ticket-padding: $spacing-row-base;
|
||||
$coupons-ticket-right-padding-y: 40rpx;
|
||||
$coupons-picture-size: 190rpx;
|
||||
$coupons-amount-font-size: 60rpx;
|
||||
$coupons-date-font-size: 20rpx;
|
||||
$coupons-intro-gap: 10rpx;
|
||||
$coupons-btn-radius: 40rpx;
|
||||
$coupons-btn-padding-x: 20rpx;
|
||||
$coupons-btn-line-height: 40rpx;
|
||||
$coupons-btn-margin-left: 20rpx;
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.container {
|
||||
.coupons-page {
|
||||
--coupons-picture-size: #{$coupons-picture-size};
|
||||
--coupons-list-offset-nav: #{$coupons-list-offset-nav};
|
||||
--coupons-list-offset-header: #{$coupons-list-offset-header};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.exchange-box {
|
||||
.coupons-exchange {
|
||||
flex-shrink: 0;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $coupons-exchange-height;
|
||||
background-color: $text-color-white;
|
||||
|
||||
.input-box {
|
||||
width: 70%;
|
||||
&__input {
|
||||
width: $coupons-exchange-input-width;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
.coupons-tabbar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
padding: 15rpx 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-primary;
|
||||
|
||||
.title {
|
||||
border-bottom: 5rpx solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: $coupons-tabbar-height;
|
||||
}
|
||||
|
||||
|
||||
.coupon-list {
|
||||
height: calc(100vh - 120rpx - 200rpx);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 120rpx - 200rpx - 44px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0 20rpx;
|
||||
.coupons-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.coupon {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
padding: $coupons-tab-title-padding-y 0;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: $color-primary;
|
||||
|
||||
.coupons-tab__title {
|
||||
border-bottom: $coupons-tab-indicator-height solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupons-list {
|
||||
height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header));
|
||||
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header) - 44px);
|
||||
/* #endif */
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 30rpx;
|
||||
//padding: 0 30rpx;
|
||||
border-radius: 6rpx;
|
||||
box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: 65rpx;
|
||||
left: -15rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: 65rpx;
|
||||
right: -15rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1rpx dashed #c6c6c6;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.coupon-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
padding: 0 $coupons-list-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.use-coupon-btn {
|
||||
width: 95%;
|
||||
border-radius: 50rem !important;
|
||||
.coupons-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-bottom: $coupons-item-gap;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $coupons-item-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: $coupons-notch-offset;
|
||||
width: $coupons-notch-size;
|
||||
height: $coupons-notch-size;
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: calc(-1 * #{$coupons-notch-size} / 2);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: calc(-1 * #{$coupons-notch-size} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.coupons-ticket {
|
||||
background-color: $text-color-white;
|
||||
|
||||
.taobao {
|
||||
background-color: white;
|
||||
.title {
|
||||
&__body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
width: $coupons-ticket-left-width;
|
||||
padding: $coupons-ticket-padding;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $coupons-ticket-radius;
|
||||
border-right: dashed 2rpx $coupons-ticket-divider;
|
||||
}
|
||||
|
||||
&__picture {
|
||||
flex-shrink: 0;
|
||||
width: var(--coupons-picture-size);
|
||||
height: var(--coupons-picture-size);
|
||||
border-radius: $coupons-ticket-radius;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
margin-left: $coupons-intro-gap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: $font-size-base;
|
||||
color: $uv-warning;
|
||||
|
||||
.coupons-ticket__amount {
|
||||
margin-right: $coupons-intro-gap;
|
||||
font-size: $coupons-amount-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__type {
|
||||
font-size: $font-size-base;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-top: $coupons-intro-gap;
|
||||
font-size: $coupons-date-font-size;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
width: $coupons-ticket-right-width;
|
||||
padding: $coupons-ticket-right-padding-y $coupons-ticket-padding;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $coupons-ticket-radius;
|
||||
}
|
||||
.ticket {
|
||||
display: flex;
|
||||
.left {
|
||||
width: 70%;
|
||||
padding: 20rpx;
|
||||
background-color: white;//rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
border-right: dashed 2rpx rgb(224, 215, 211);
|
||||
display: flex;
|
||||
.picture {
|
||||
//width: 172rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 190rpx;
|
||||
height: 190rpx;
|
||||
}
|
||||
.introduce {
|
||||
margin-left: 10rpx;
|
||||
.top{
|
||||
color:$uv-warning;
|
||||
font-size: 28rpx;
|
||||
.big{
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.type{
|
||||
font-size: 28rpx;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
.date{
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
height: auto;
|
||||
margin-left: $coupons-btn-margin-left;
|
||||
padding: 0 $coupons-btn-padding-x;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $coupons-btn-line-height;
|
||||
border-radius: $coupons-btn-radius;
|
||||
color: $text-color-white !important;
|
||||
|
||||
&--use {
|
||||
background-color: $uv-warning !important;
|
||||
}
|
||||
.right {
|
||||
width: 30%;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: white;//rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff!important;
|
||||
background-color: $uv-warning!important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.used {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff!important;
|
||||
background-color: $uv-info-dark!important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
&--used {
|
||||
background-color: $uv-info-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,49 +6,45 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="wrap">
|
||||
<view class="top"></view>
|
||||
<view class="content">
|
||||
<view class="title">欢迎登录</view>
|
||||
<view class="login-page">
|
||||
<view class="login-page__form">
|
||||
<view class="login-page__title">欢迎登录</view>
|
||||
|
||||
<input class="u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
|
||||
<view class="tips">未注册的手机号验证后自动创建账号</view>
|
||||
<input class="login-page__input u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
|
||||
<view class="login-page__tips">未注册的手机号验证后自动创建账号</view>
|
||||
|
||||
|
||||
<view style="display: flex;">
|
||||
<view style="width: 50%;">
|
||||
<input style="height: 100rpx;" class="u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
|
||||
<view class="login-page__captcha-row">
|
||||
<view class="login-page__captcha-col">
|
||||
<input class="login-page__input login-page__input--captcha u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view style="width: 50%;">
|
||||
<button style="height: 100rpx;" @tap="getCaptcha" :style="[captchaStyle]" class="getCaptcha">
|
||||
<view class="login-page__captcha-col">
|
||||
<button
|
||||
class="login-page__btn login-page__btn--captcha"
|
||||
:class="{ 'login-page__btn--active': isCaptchaBtnActive }"
|
||||
@tap="getCaptcha"
|
||||
>
|
||||
{{captchaText}}
|
||||
<uv-code :seconds="seconds" @end="endCaptcha" @start="startCaptcha" ref="uCode" @change="changeCapcha"></uv-code>
|
||||
<!-- <u-verification-code :seconds="seconds" @end="endCaptcha" @change="changeCapcha" @start="startCaptcha" ref="uCode" >
|
||||
|
||||
</u-verification-code> -->
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button @tap="submit" style="color:#fff;background-color: #f9ae3d;" type="primary" class="login">登录</button>
|
||||
<button @tap="submit" type="primary" class="login-page__btn login-page__btn--submit login-page__btn--active">登录</button>
|
||||
|
||||
</view>
|
||||
<view class="buttom">
|
||||
<view class="loginType">
|
||||
<view class="login-page__footer">
|
||||
<view class="login-page__oauth">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button type="primary" size="default" class="login-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
|
||||
<!-- <image src="/static/images/mine/wechat.png"></image> -->
|
||||
<button type="primary" size="default" class="login-page__wechat-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
|
||||
手机号快捷登录
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="hint">
|
||||
<!-- <label class="label"> -->
|
||||
<view class="login-page__agreement">
|
||||
<radio value="isChecked" @tap.stop="onChange" />
|
||||
我已经阅读并遵守
|
||||
<text class="link" @tap="serv(29,'用户协议')">《用户协议》</text>与
|
||||
<text class="link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
|
||||
<!-- </label> -->
|
||||
<text class="login-page__link" @tap="serv(29,'用户协议')">《用户协议》</text>与
|
||||
<text class="login-page__link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
<uv-toast ref="uToast"></uv-toast>
|
||||
@@ -57,10 +53,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
} from 'vue'
|
||||
computed
|
||||
} from 'vue'
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import {
|
||||
@@ -73,7 +69,7 @@ import * as util from '@/utils/util'
|
||||
import { mobile as testMobible } from '@/uni_modules/uv-ui-tools/libs/function/test'
|
||||
const main = useMainStore()
|
||||
const title = ref('登录')
|
||||
const mobile = ref('')
|
||||
const mobile = ref('')
|
||||
const captcha = ref('')
|
||||
const captchaText = ref('获取验证码')
|
||||
const password = ref('')
|
||||
@@ -83,13 +79,8 @@ const openid = ref(main.openid)
|
||||
const uToast = ref()
|
||||
const uCode = ref()
|
||||
|
||||
const captchaStyle = computed(() => {
|
||||
let style = {};
|
||||
if(mobile.value && captchaText.value == '获取验证码') {
|
||||
style.color = "#fff";
|
||||
style.backgroundColor = '#f9ae3d';
|
||||
}
|
||||
return style;
|
||||
const isCaptchaBtnActive = computed(() => {
|
||||
return Boolean(mobile.value) && captchaText.value === '获取验证码';
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
@@ -99,7 +90,7 @@ onShow(() => {
|
||||
wechatMiniLogin();
|
||||
}
|
||||
|
||||
// #endif
|
||||
// #endif
|
||||
})
|
||||
|
||||
|
||||
@@ -115,7 +106,7 @@ const wechatMiniLogin = () => {
|
||||
console.log('data.openId001:',data.openId)
|
||||
main.SET_OPENID(data.openId)
|
||||
openid.value = data.openId
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -255,101 +246,125 @@ const onChange = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
background-color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
$login-content-width: 600rpx;
|
||||
$login-title-size: 60rpx;
|
||||
$login-title-margin-bottom: 100rpx;
|
||||
$login-input-height: 100rpx;
|
||||
$login-btn-font-size: 30rpx;
|
||||
$login-btn-padding-y: 12rpx;
|
||||
$login-submit-margin-top: 40rpx;
|
||||
$login-oauth-padding: 80rpx;
|
||||
$login-wechat-btn-bg: #1aad19;
|
||||
$login-wechat-icon-width: 36rpx;
|
||||
$login-wechat-icon-height: 30rpx;
|
||||
$login-agreement-font-size: 20rpx;
|
||||
$login-agreement-padding-y: 20rpx;
|
||||
$login-agreement-padding-x: 40rpx;
|
||||
|
||||
.login-page {
|
||||
--login-content-width: #{$login-content-width};
|
||||
--login-input-height: #{$login-input-height};
|
||||
--login-btn-font-size: #{$login-btn-font-size};
|
||||
|
||||
background-color: $text-color-white;
|
||||
font-size: $font-size-base;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.content {
|
||||
width: 600rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
input {
|
||||
text-align: left;
|
||||
margin-bottom: 10rpx;
|
||||
padding-bottom: 6rpx;
|
||||
}
|
||||
.tips {
|
||||
color: $uv-info;
|
||||
margin-bottom: 60rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.getCaptcha {
|
||||
background-color: rgb(253, 243, 208);
|
||||
color: $uv-tips-color;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
padding: 12rpx 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.login {
|
||||
background-color: rgb(253, 243, 208);
|
||||
color: $uv-tips-color;
|
||||
border: none;
|
||||
font-size: 30rpx;
|
||||
padding: 12rpx 0;
|
||||
margin-top: 40rpx;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.alternative {
|
||||
color: $uv-tips-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
&__form {
|
||||
width: var(--login-content-width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
font-size: $login-title-size;
|
||||
font-weight: 500;
|
||||
margin-bottom: $login-title-margin-bottom;
|
||||
}
|
||||
|
||||
&__input {
|
||||
text-align: left;
|
||||
margin-bottom: 10rpx;
|
||||
padding-bottom: 6rpx;
|
||||
|
||||
&--captcha {
|
||||
height: var(--login-input-height);
|
||||
}
|
||||
}
|
||||
.buttom {
|
||||
//position: absolute;
|
||||
|
||||
&__tips {
|
||||
color: $uv-info;
|
||||
margin: 8rpx 0 60rpx;
|
||||
}
|
||||
|
||||
&__captcha-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__captcha-col {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
height: var(--login-input-height);
|
||||
border: none;
|
||||
font-size: var(--login-btn-font-size);
|
||||
padding: $login-btn-padding-y 0;
|
||||
background-color: $uv-warning-light;
|
||||
color: $uv-tips-color;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: $uv-warning;
|
||||
color: $text-color-white;
|
||||
}
|
||||
|
||||
&--submit {
|
||||
margin-top: $login-submit-margin-top;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
bottom: 0;
|
||||
//display: flex;
|
||||
//flex-direction: column;
|
||||
//align-items: center;
|
||||
//justify-content: center;
|
||||
.loginType {
|
||||
padding: 80rpx;
|
||||
//justify-content:space-between;
|
||||
|
||||
.login-btn {
|
||||
background-color: #1aad19!important;
|
||||
width: 100%;
|
||||
border-radius: 50rem !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 0;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 36rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 40rpx;
|
||||
font-size: 20rpx;
|
||||
color: $uv-tips-color;
|
||||
|
||||
.link {
|
||||
color: $uv-warning;
|
||||
}
|
||||
}
|
||||
|
||||
&__oauth {
|
||||
padding: $login-oauth-padding;
|
||||
}
|
||||
|
||||
&__wechat-btn {
|
||||
width: 100%;
|
||||
border-radius: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 0;
|
||||
text-align: center;
|
||||
background-color: $login-wechat-btn-bg !important;
|
||||
|
||||
image {
|
||||
width: $login-wechat-icon-width;
|
||||
height: $login-wechat-icon-height;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $login-agreement-padding-y $login-agreement-padding-x;
|
||||
font-size: $login-agreement-font-size;
|
||||
color: $uv-tips-color;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $uv-warning;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,8 +6,8 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="top">
|
||||
<button type="primary" size="default" class="login-btn" @click="logout">
|
||||
<view class="logout-page">
|
||||
<button type="primary" size="default" class="logout-page__btn" @click="logout">
|
||||
确定退出登录
|
||||
</button>
|
||||
<uv-toast ref="uToast"></uv-toast>
|
||||
@@ -45,12 +45,12 @@ const logout = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
button{
|
||||
margin: auto;
|
||||
.logout-page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
&__btn {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +1,53 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="bg-white p-2">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="mine-content">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import { onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import {
|
||||
} from 'vue'
|
||||
import { onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import {
|
||||
mineServiceContent
|
||||
} from '@/api/user'
|
||||
|
||||
|
||||
const title = ref('内容')
|
||||
const content = ref('')
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.name) {
|
||||
title.value = option.name
|
||||
}
|
||||
if (option.id) {
|
||||
getContent(option.id);
|
||||
}
|
||||
})
|
||||
const getContent = async(id) => {
|
||||
let data = await mineServiceContent({id:id});
|
||||
if (data) {
|
||||
content.value = data.content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
} from '@/api/user'
|
||||
|
||||
|
||||
const title = ref('内容')
|
||||
const content = ref('')
|
||||
|
||||
onLoad((option) => {
|
||||
if (option.name) {
|
||||
title.value = option.name
|
||||
}
|
||||
if (option.id) {
|
||||
getContent(option.id);
|
||||
}
|
||||
})
|
||||
const getContent = async(id) => {
|
||||
let data = await mineServiceContent({id:id});
|
||||
if (data) {
|
||||
content.value = data.content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$mine-content-padding: $spacing-row-base;
|
||||
|
||||
.mine-content {
|
||||
padding: $mine-content-padding;
|
||||
background-color: $text-color-white;
|
||||
}
|
||||
</style>
|
||||
@@ -5,19 +5,19 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container d-flex flex-column">
|
||||
<view class="flex-fill form">
|
||||
<view class="userinfo-page d-flex flex-column">
|
||||
<view class="flex-fill userinfo-page__form">
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input w-100 d-flex align-items-center">
|
||||
<view class="label">头像</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
|
||||
<view class="flex user-box align-items-center">
|
||||
<view class="userinfo-page__field w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">头像</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__avatar-row d-flex align-items-center">
|
||||
<view class="mr-1">
|
||||
<uv-avatar :src="member.avatar" size="60"></uv-avatar>
|
||||
</view>
|
||||
<view v-if="!member.avatar" class="flex-1" style="right:0;height: 60rpx;">
|
||||
<button style="background-color: #09b4f1;color:#fff;" size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
|
||||
<view v-if="!member.avatar" class="flex-1 userinfo-page__change-avatar">
|
||||
<button size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -26,37 +26,45 @@
|
||||
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input w-100 d-flex align-items-center">
|
||||
<view class="label">昵称</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="userinfo-page__field w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">昵称</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base"
|
||||
v-model="member.nickname">
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
|
||||
<view class="label">手机号码</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">手机号码</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<input type="text" v-model="member.mobile" disabled>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false">
|
||||
<view class="form-input w-100 d-flex align-items-center">
|
||||
<view class="label">性别</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="radio-group">
|
||||
<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view>
|
||||
<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view>
|
||||
<view class="userinfo-page__field w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">性别</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<view class="userinfo-page__radio-group">
|
||||
<view
|
||||
class="userinfo-page__radio"
|
||||
:class="{ 'userinfo-page__radio--checked': member.gender == '0' }"
|
||||
@tap="member.gender=0"
|
||||
>先生</view>
|
||||
<view
|
||||
class="userinfo-page__radio"
|
||||
:class="{ 'userinfo-page__radio--checked': member.gender == '1' }"
|
||||
@tap="member.gender=1"
|
||||
>女士</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false" :arrow="!member.birthday">
|
||||
<view class="form-input w-100 d-flex align-items-center">
|
||||
<view class="label">生日</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="userinfo-page__field w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">生日</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<picker mode="date" :value="member.birthday" :start="startDate" :end="endDate" @change="handleDateChange">
|
||||
{{member.birthday ? member.birthday : '无'}}
|
||||
</picker>
|
||||
@@ -64,16 +72,16 @@
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="form-input w-100 d-flex align-items-center">
|
||||
<view class="label">加入时间</view>
|
||||
<view class="input flex-fill">
|
||||
<view class="userinfo-page__field w-100 d-flex align-items-center">
|
||||
<view class="userinfo-page__label">加入时间</view>
|
||||
<view class="userinfo-page__input flex-fill">
|
||||
<input type="text" v-model="member.createTime" disabled>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="btn-box d-flex align-items-center just-content-center">
|
||||
<button type="primary" class="save-btn" @tap="save">保存</button>
|
||||
<view class="userinfo-page__actions d-flex align-items-center just-content-center">
|
||||
<button type="primary" class="userinfo-page__save-btn" @tap="save">保存</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -177,55 +185,87 @@ const save = async() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 用户设置页局部 token（与 uni.scss 全局变量配合）
|
||||
$userinfo-padding-y: 20rpx;
|
||||
$userinfo-padding-x: $spacing-row-lg;
|
||||
$userinfo-form-radius: 8rpx;
|
||||
$userinfo-label-width: 160rpx;
|
||||
$userinfo-radio-gap: 10rpx;
|
||||
$userinfo-radio-padding-y: 10rpx;
|
||||
$userinfo-radio-padding-x: 30rpx;
|
||||
$userinfo-radio-border-width: 2rpx;
|
||||
$userinfo-avatar-btn-height: 60rpx;
|
||||
$userinfo-save-btn-width: 90%;
|
||||
$userinfo-save-btn-radius: 50rem;
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
.userinfo-page {
|
||||
--userinfo-padding-y: #{$userinfo-padding-y};
|
||||
--userinfo-padding-x: #{$userinfo-padding-x};
|
||||
--userinfo-label-width: #{$userinfo-label-width};
|
||||
--userinfo-radio-gap: #{$userinfo-radio-gap};
|
||||
--userinfo-avatar-btn-height: #{$userinfo-avatar-btn-height};
|
||||
--userinfo-save-btn-width: #{$userinfo-save-btn-width};
|
||||
|
||||
.form {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
padding: var(--userinfo-padding-y) var(--userinfo-padding-x);
|
||||
|
||||
.form-input {
|
||||
.label {
|
||||
width: 160rpx;
|
||||
&__form {
|
||||
border-radius: $userinfo-form-radius;
|
||||
}
|
||||
|
||||
&__field {
|
||||
&--relative {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
width: var(--userinfo-label-width);
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
}
|
||||
|
||||
.input {
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
|
||||
&__radio-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.radio {
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 2rpx solid $text-color-assist;
|
||||
color: $text-color-assist;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.checked {
|
||||
background-color: $color-primary;
|
||||
color: $text-color-white;
|
||||
border: 2rpx solid $color-primary;
|
||||
}
|
||||
gap: var(--userinfo-radio-gap);
|
||||
}
|
||||
|
||||
&__radio {
|
||||
padding: $userinfo-radio-padding-y $userinfo-radio-padding-x;
|
||||
border-radius: $border-radius-base;
|
||||
border: $userinfo-radio-border-width solid $text-color-assist;
|
||||
color: $text-color-assist;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&--checked {
|
||||
background-color: $color-primary;
|
||||
color: $text-color-white;
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
height: calc((100vh - var(--userinfo-padding-y) * 2) / 2);
|
||||
}
|
||||
|
||||
&__save-btn {
|
||||
width: var(--userinfo-save-btn-width);
|
||||
border-radius: $userinfo-save-btn-radius !important;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
&__change-avatar {
|
||||
right: 0;
|
||||
height: var(--userinfo-avatar-btn-height);
|
||||
|
||||
button {
|
||||
background-color: $color-primary;
|
||||
color: $text-color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
height: calc((100vh - 40rpx) / 2);
|
||||
}
|
||||
.save-btn {
|
||||
width: 90%;
|
||||
border-radius: 50rem !important;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -5,10 +5,10 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container" style="padding:20rpx;">
|
||||
<view style="padding-bottom: 100rpx;">
|
||||
<view class="container order-detail-page">
|
||||
<view class="order-detail-page__body">
|
||||
<view class="bg-white">
|
||||
<view class="section">
|
||||
<view class="order-detail-section">
|
||||
<!-- store info begin -->
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
@@ -16,8 +16,8 @@
|
||||
<view class="w-100 font-size-lg text-color-base text-truncate">{{ order.shop.name }}</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-end align-items-center w-40">
|
||||
<view class="iconfont-yshop icon-mobile" @click="makePhoneCall(order.shop)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
|
||||
<view class="iconfont-yshop icon-location" @click="openLocation(order.shop)" style="font-size: 45rpx;"></view>
|
||||
<view class="iconfont-yshop icon-mobile order-detail-page__shop-icon" @click="makePhoneCall(order.shop)"></view>
|
||||
<view class="iconfont-yshop icon-location order-detail-page__shop-icon order-detail-page__shop-icon--last" @click="openLocation(order.shop)"></view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
@@ -25,50 +25,50 @@
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="d-flex align-items-center just-content-center">
|
||||
<view class="sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view>
|
||||
<view class="order-detail-page__sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view>
|
||||
</view>
|
||||
<!-- steps begin -->
|
||||
<view class="d-flex just-content-center">
|
||||
<view class="steps d-flex flex-column w-80">
|
||||
<view class="steps__img-column">
|
||||
<view class="steps__img-column-item">
|
||||
<view class="order-detail-steps d-flex flex-column w-80">
|
||||
<view class="order-detail-steps__icons">
|
||||
<view class="order-detail-steps__icon-item">
|
||||
<view class="iconfont-yshop icon-lamp"></view>
|
||||
</view>
|
||||
<view class="steps__img-column-item">
|
||||
<view class="order-detail-steps__icon-item">
|
||||
<view class="iconfont-yshop icon-daojishi" v-if="{active: order.paid == 1 && order.status == 0}"></view>
|
||||
<view class="iconfont-yshop icon-daojishi unactive" v-else></view>
|
||||
<view class="iconfont-yshop icon-daojishi order-detail-steps__icon--inactive" v-else></view>
|
||||
</view>
|
||||
<view class="steps__img-column-item" v-if="order.orderType == 'takeout'">
|
||||
<view class="order-detail-steps__icon-item" v-if="order.orderType == 'takeout'">
|
||||
<view class="iconfont-yshop icon-takeout" v-if="order.status == 1"></view>
|
||||
<view class="iconfont-yshop icon-takeout unactive" v-else></view>
|
||||
<view class="iconfont-yshop icon-takeout order-detail-steps__icon--inactive" v-else></view>
|
||||
</view>
|
||||
<view class="steps__img-column-item" >
|
||||
<view class="order-detail-steps__icon-item">
|
||||
<view class="iconfont-yshop icon-doorbell" v-if="order.status >= 2"></view>
|
||||
<view class="iconfont-yshop icon-doorbell unactive" v-else></view>
|
||||
<view class="iconfont-yshop icon-doorbell order-detail-steps__icon--inactive" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="steps__text-column">
|
||||
<view class="steps__text-column-item active">
|
||||
<view class="steps__column-item-line bg-transparent"></view>
|
||||
<view class="steps__text-column-item-text">已下单</view>
|
||||
<view class="steps__column-item-line"></view>
|
||||
<view class="order-detail-steps__labels">
|
||||
<view class="order-detail-steps__label order-detail-steps__label--active">
|
||||
<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
|
||||
<view class="order-detail-steps__text">已下单</view>
|
||||
<view class="order-detail-steps__line"></view>
|
||||
</view>
|
||||
<view class="steps__text-column-item activ" :class="{active: order.paid == 1}">
|
||||
<view class="steps__column-item-line"></view>
|
||||
<view class="steps__text-column-item-text">制作中</view>
|
||||
<view class="steps__column-item-line"></view>
|
||||
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.paid == 1}">
|
||||
<view class="order-detail-steps__line"></view>
|
||||
<view class="order-detail-steps__text">制作中</view>
|
||||
<view class="order-detail-steps__line"></view>
|
||||
</view>
|
||||
<view class="steps__text-column-item" :class="{active: order.status == 1}" v-if="order.orderType == 'takeout'">
|
||||
<view class="steps__column-item-line"></view>
|
||||
<view class="steps__text-column-item-text">配送中</view>
|
||||
<view class="steps__column-item-line bg-transparent"></view>
|
||||
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status == 1}" v-if="order.orderType == 'takeout'">
|
||||
<view class="order-detail-steps__line"></view>
|
||||
<view class="order-detail-steps__text">配送中</view>
|
||||
<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
|
||||
</view>
|
||||
<view class="steps__text-column-item" :class="{active: order.status >= 2}">
|
||||
<view class="steps__column-item-line"></view>
|
||||
<view class="steps__text-column-item-text">
|
||||
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status >= 2}">
|
||||
<view class="order-detail-steps__line"></view>
|
||||
<view class="order-detail-steps__text">
|
||||
{{ order.orderType == 'takeout' ? '已送达' : '请取餐' }}
|
||||
</view>
|
||||
<view class="steps__column-item-line bg-transparent"></view>
|
||||
<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -78,7 +78,7 @@
|
||||
您前面还有 <text class="text-color-primary mr-10 ml-10">{{order.preNum}}</text> 单待制作
|
||||
</view>
|
||||
<!-- goods begin -->
|
||||
<view class="w-100 d-flex flex-column position-relative mt-30" style="margin-bottom: -40rpx;">
|
||||
<view class="w-100 d-flex flex-column position-relative mt-30 order-detail-page__goods-preview">
|
||||
<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.products" :key="index">
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
|
||||
@@ -94,12 +94,12 @@
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="order-detail-section">
|
||||
<!-- goods begin -->
|
||||
<list-cell :hover="false" padding="30rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column position-relative">
|
||||
<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="image"></image>
|
||||
<image :src="good.image" mode="aspectFill" class="order-detail-page__thumb"></image>
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
|
||||
<view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view>
|
||||
@@ -115,23 +115,23 @@
|
||||
<!-- payment and amount begin -->
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>支付方式</view>
|
||||
<view class="font-weight-bold">{{ order.statusDto.payType }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>订单金额</view>
|
||||
<view class="font-weight-bold">￥{{ order.totalPrice }}</view>
|
||||
</view>
|
||||
<view class="pay-cell" v-if="order.orderType == 'takeout'">
|
||||
<view class="order-detail-pay-cell" v-if="order.orderType == 'takeout'">
|
||||
<view>配送费</view>
|
||||
<view class="font-weight-bold">￥{{ order.payPostage }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>优惠金额</view>
|
||||
<view class="font-weight-bold">￥{{ order.couponPrice }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>实付金额</view>
|
||||
<view class="font-weight-bold">￥{{ order.payPrice }}</view>
|
||||
</view>
|
||||
@@ -139,42 +139,42 @@
|
||||
</list-cell>
|
||||
<!-- payment and amount end -->
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="order-detail-section">
|
||||
<!-- order info begin -->
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>下单时间</view>
|
||||
<view class="font-weight-bold">{{ formatDateTime(order.createTime )}}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>下单门店</view>
|
||||
<view class="font-weight-bold">{{ order.shop.name }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>订单号</view>
|
||||
<view class="font-weight-bold">{{ order.id }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<!-- order info end -->
|
||||
<!-- order info end -->
|
||||
</view>
|
||||
<!-- order other info begin -->
|
||||
<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>享用方式</view>
|
||||
<view class="font-weight-bold">{{order.orderType == 'takein' ? '自取' : '外卖'}}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>取餐时间</view>
|
||||
<view class="font-weight-bold">{{order.getTime ? formatDateTime(order.getTime) : '立即取餐'}}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>制作完成时间</view>
|
||||
<view class="font-weight-bold">{{ order.deliveryTime ? formatDateTime(order.deliveryTime) : '无' }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="order-detail-pay-cell">
|
||||
<view>备注</view>
|
||||
<view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view>
|
||||
</view>
|
||||
@@ -255,158 +255,179 @@ const refund = (order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
$order-detail-padding: $spacing-row-base;
|
||||
$order-detail-body-padding-bottom: 100rpx;
|
||||
$order-detail-thumb-size: 120rpx;
|
||||
$order-detail-thumb-radius: 8rpx;
|
||||
$order-detail-pay-cell-gap: 40rpx;
|
||||
$order-detail-sort-num-size: 64rpx;
|
||||
$order-detail-section-notch: 30rpx;
|
||||
$order-detail-section-notch-offset: 15rpx;
|
||||
$order-detail-steps-icon-size: 60rpx;
|
||||
$order-detail-steps-img-size: 80rpx;
|
||||
$order-detail-steps-margin-y: 30rpx;
|
||||
$order-detail-steps-label-gap: $spacing-col-sm;
|
||||
$order-detail-shop-icon-size: 45rpx;
|
||||
$order-detail-shop-icon-gap: 40rpx;
|
||||
$order-detail-goods-offset: -40rpx;
|
||||
$order-detail-steps-line-height: 2rpx;
|
||||
|
||||
|
||||
.pay-cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@mixin order-detail-section-notch {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(-1 * #{$order-detail-section-notch-offset});
|
||||
z-index: 10;
|
||||
width: $order-detail-section-notch;
|
||||
height: $order-detail-section-notch;
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
/* #endif */
|
||||
.order-box {
|
||||
padding: 20rpx;
|
||||
/* #ifdef H5 */
|
||||
margin-bottom: 100rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.drinks-img {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 60rpx 0 80rpx;
|
||||
line-height: 48rpx;
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.order-detail-page {
|
||||
padding: $order-detail-padding;
|
||||
--order-detail-thumb-size: #{$order-detail-thumb-size};
|
||||
|
||||
&__body {
|
||||
padding-bottom: $order-detail-body-padding-bottom;
|
||||
}
|
||||
|
||||
|
||||
@mixin arch {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: -15rpx;
|
||||
z-index: 10;
|
||||
border-radius: 100%;
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--order-detail-thumb-size);
|
||||
height: var(--order-detail-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $order-detail-thumb-radius;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include arch;
|
||||
left: -15rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include arch;
|
||||
right: -15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-num {
|
||||
font-size: 64rpx;
|
||||
&__sort-num {
|
||||
font-size: $order-detail-sort-num-size;
|
||||
font-weight: bold;
|
||||
color: $text-color-base;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.steps__img-column {
|
||||
display: flex;
|
||||
margin: 30rpx 0;
|
||||
|
||||
.steps__img-column-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.unactive {
|
||||
color: #919293;
|
||||
}
|
||||
|
||||
&__shop-icon {
|
||||
font-size: $order-detail-shop-icon-size;
|
||||
color: $color-primary;
|
||||
|
||||
&--last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(&--last) {
|
||||
margin-right: $order-detail-shop-icon-gap;
|
||||
}
|
||||
}
|
||||
|
||||
.steps__text-column {
|
||||
display: flex;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.steps__text-column-item {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-assist;
|
||||
|
||||
&.active {
|
||||
color: $text-color-base;
|
||||
font-weight: bold;
|
||||
|
||||
.steps__column-item-line {
|
||||
background-color: $text-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.steps__column-item-line{
|
||||
flex: 1;
|
||||
height: 2rpx;
|
||||
background-color: #919293;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.steps__text-column-item-text {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-lamp, .icon-daojishi, .icon-takeout, .icon-doorbell{
|
||||
font-size: 60rpx;
|
||||
|
||||
&__goods-preview {
|
||||
margin-bottom: $order-detail-goods-offset;
|
||||
}
|
||||
|
||||
.iconfont-yshop {
|
||||
color: #09b4f1;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.order-detail-section {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include order-detail-section-notch;
|
||||
left: calc(-1 * #{$order-detail-section-notch-offset});
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include order-detail-section-notch;
|
||||
right: calc(-1 * #{$order-detail-section-notch-offset});
|
||||
}
|
||||
}
|
||||
|
||||
.order-detail-pay-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: $order-detail-pay-cell-gap;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-detail-steps {
|
||||
&__icons {
|
||||
display: flex;
|
||||
margin: $order-detail-steps-margin-y 0;
|
||||
}
|
||||
|
||||
&__icon-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: $order-detail-steps-img-size;
|
||||
height: $order-detail-steps-img-size;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon--inactive {
|
||||
color: $text-color-assist;
|
||||
}
|
||||
|
||||
&__labels {
|
||||
display: flex;
|
||||
margin-bottom: $order-detail-pay-cell-gap;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-assist;
|
||||
|
||||
&--active {
|
||||
font-weight: bold;
|
||||
color: $text-color-base;
|
||||
|
||||
.order-detail-steps__line {
|
||||
background-color: $text-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__line {
|
||||
flex: 1;
|
||||
height: $order-detail-steps-line-height;
|
||||
background-color: $text-color-assist;
|
||||
transform: scaleY(0.5);
|
||||
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0 $order-detail-steps-label-gap;
|
||||
}
|
||||
|
||||
.icon-lamp,
|
||||
.icon-daojishi,
|
||||
.icon-takeout,
|
||||
.icon-doorbell {
|
||||
font-size: $order-detail-steps-icon-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,16 +5,16 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="container orders-page">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
</view>
|
||||
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" @tap="detail(item.orderId)">
|
||||
<view class="orders-page__list d-flex flex-column w-100">
|
||||
<view class="orders-item" v-for="(item, index) in orders" :key="index" @tap="detail(item.orderId)">
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="flex-fill d-flex flex-column">
|
||||
<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="font-size-lg text-color-base orders-item__shop">
|
||||
{{ item.shop.name }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
|
||||
@@ -27,9 +27,9 @@
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="image"></image>
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base orders-item__goods">
|
||||
<view class="flex orders-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="orders-item__thumb"></image>
|
||||
<view class="flex flex-column">
|
||||
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
|
||||
<view class="font-size-sm mt-1">{{ good.spec }}</view>
|
||||
@@ -37,20 +37,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
|
||||
<view class="d-flex justify-content-between align-items-center orders-item__meta">
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{formatDateTime(item.createTime) }}
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-base align-items-center">
|
||||
<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="orders-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="font-size-lg">￥{{ item.payPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end">
|
||||
<view>
|
||||
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
|
||||
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end orders-item__actions">
|
||||
<button
|
||||
v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
|
||||
class="orders-item__btn"
|
||||
plain
|
||||
size="mini"
|
||||
@tap.stop="receive(item)"
|
||||
>确认收到餐</button>
|
||||
<button class="orders-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
@@ -62,9 +66,9 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
orderGetOrders,
|
||||
orderReceive
|
||||
orderReceive
|
||||
} from '@/api/order'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -161,13 +165,53 @@ const receive = async(order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-margin {
|
||||
margin-left: 10rpx;
|
||||
$orders-list-padding-x: $spacing-row-base;
|
||||
$orders-list-padding-bottom: 0;
|
||||
$orders-item-gap: $spacing-row-lg;
|
||||
$orders-section-gap: $spacing-row-base;
|
||||
$orders-btn-gap: $spacing-row-base;
|
||||
$orders-summary-gap: $spacing-row-base;
|
||||
$orders-thumb-size: 160rpx;
|
||||
$orders-thumb-radius: 8rpx;
|
||||
|
||||
.orders-page {
|
||||
--orders-thumb-size: #{$orders-thumb-size};
|
||||
|
||||
&__list {
|
||||
padding: $orders-list-padding-x;
|
||||
padding-bottom: $orders-list-padding-bottom;
|
||||
}
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.orders-item {
|
||||
margin-bottom: $orders-item-gap;
|
||||
|
||||
&__shop {
|
||||
margin-bottom: $orders-section-gap;
|
||||
}
|
||||
|
||||
&__goods {
|
||||
margin-bottom: $orders-section-gap;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--orders-thumb-size);
|
||||
height: var(--orders-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $orders-thumb-radius;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
margin-bottom: $orders-item-gap;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
margin-right: $orders-summary-gap;
|
||||
}
|
||||
|
||||
&__btn + &__btn {
|
||||
margin-left: $orders-btn-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +1,69 @@
|
||||
<template>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="p-2">
|
||||
<uv-list>
|
||||
<uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item>
|
||||
<uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item>
|
||||
<uv-list-item title="退款类型" rightText="整个订单"></uv-list-item>
|
||||
<uv-list-item title="退款原因" rightText="协商一致"></uv-list-item>
|
||||
<uv-list-item title="退款留言" >
|
||||
<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
|
||||
</uv-list-item>
|
||||
</uv-list>
|
||||
<view class="mt-2">
|
||||
<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
|
||||
</view>
|
||||
<uv-toast ref="toast"></uv-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<template>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="refund-page">
|
||||
<uv-list>
|
||||
<uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item>
|
||||
<uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item>
|
||||
<uv-list-item title="退款类型" rightText="整个订单"></uv-list-item>
|
||||
<uv-list-item title="退款原因" rightText="协商一致"></uv-list-item>
|
||||
<uv-list-item title="退款留言" >
|
||||
<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
|
||||
</uv-list-item>
|
||||
</uv-list>
|
||||
<view class="refund-page__submit">
|
||||
<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
|
||||
</view>
|
||||
<uv-toast ref="toast"></uv-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import {
|
||||
} from 'vue'
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
import {
|
||||
orderRefund
|
||||
} from '@/api/order'
|
||||
const title = ref('申请退款')
|
||||
const orderId = ref('')
|
||||
const payPrice = ref('')
|
||||
const totalPrice = ref('')
|
||||
const refundReasonWapExplain = ref('')
|
||||
const toast = ref()
|
||||
onLoad((option) => {
|
||||
console.log('option:',option)
|
||||
orderId.value = option.orderId
|
||||
payPrice.value = option.payPrice
|
||||
totalPrice.value = option.totalPrice
|
||||
})
|
||||
|
||||
const refund = async() => {
|
||||
let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
|
||||
if (data) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
} from '@/api/order'
|
||||
const title = ref('申请退款')
|
||||
const orderId = ref('')
|
||||
const payPrice = ref('')
|
||||
const totalPrice = ref('')
|
||||
const refundReasonWapExplain = ref('')
|
||||
const toast = ref()
|
||||
onLoad((option) => {
|
||||
console.log('option:',option)
|
||||
orderId.value = option.orderId
|
||||
payPrice.value = option.payPrice
|
||||
totalPrice.value = option.totalPrice
|
||||
})
|
||||
|
||||
const refund = async() => {
|
||||
let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
|
||||
if (data) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$refund-padding: $spacing-row-base;
|
||||
$refund-submit-gap: $spacing-row-base;
|
||||
|
||||
.refund-page {
|
||||
padding: $refund-padding;
|
||||
|
||||
&__submit {
|
||||
margin-top: $refund-submit-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,38 +5,62 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container position-relative w-100 h-100 overflow-hidden">
|
||||
<view class="container packages-page position-relative w-100 h-100 overflow-hidden">
|
||||
<uv-empty v-if="coupons.length == 0" mode="coupon"></uv-empty>
|
||||
|
||||
<scroll-view scroll-y class="coupon-list">
|
||||
<view class="wrapper">
|
||||
<view class="coupon" v-for="(item, index) in coupons" :key="index" @tap="openDetailModal(item, index)">
|
||||
<view class="taobao">
|
||||
<view class="ticket" :style="{border: item.id == coupon_id ? '1rpx solid red':''}">
|
||||
<view class="left">
|
||||
<image class="picture" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="introduce">
|
||||
<view class="top">
|
||||
|
||||
<scroll-view scroll-y class="packages-list">
|
||||
<view class="packages-list__wrapper">
|
||||
<view
|
||||
class="packages-item"
|
||||
v-for="(item, index) in coupons"
|
||||
:key="index"
|
||||
@tap="openDetailModal(item, index)"
|
||||
>
|
||||
<view class="packages-ticket">
|
||||
<view
|
||||
class="packages-ticket__body"
|
||||
:class="{ 'packages-ticket__body--selected': item.id == coupon_id }"
|
||||
>
|
||||
<view class="packages-ticket__left">
|
||||
<image
|
||||
class="packages-ticket__picture"
|
||||
:src="item.image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="packages-ticket__intro">
|
||||
<view class="packages-ticket__value">
|
||||
￥
|
||||
<text class="big">{{ item.value }}</text>
|
||||
<text class="packages-ticket__amount">{{ item.value }}</text>
|
||||
<view>满{{ item.least }}减{{ item.value }}</view>
|
||||
</view>
|
||||
<view class="type">{{ item.title }}</view>
|
||||
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
|
||||
<view class="packages-ticket__type">{{ item.title }}</view>
|
||||
<view class="packages-ticket__date u-line-1">
|
||||
{{ formatDateTime(item.startTime, 'yyyy-MM-dd') }}-{{ formatDateTime(item.endTime, 'yyyy-MM-dd') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view v-if="item.id != coupon_id" class="use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
|
||||
<view v-else class="use immediate-use" :round="true" @tap="cancelCoupon(item)">取消使用</view>
|
||||
<view class="packages-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
|
||||
<view
|
||||
v-if="item.id != coupon_id"
|
||||
class="packages-ticket__btn packages-ticket__btn--use immediate-use"
|
||||
:round="true"
|
||||
@tap="useCouponWith(item)"
|
||||
>立即使用</view>
|
||||
<view
|
||||
v-else
|
||||
class="packages-ticket__btn packages-ticket__btn--use immediate-use"
|
||||
:round="true"
|
||||
@tap="cancelCoupon(item)"
|
||||
>取消使用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%">
|
||||
<view class="modal-content">
|
||||
<view class="packages-modal">
|
||||
<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view>
|
||||
<view class="d-flex font-size-sm text-color-base mb-20">有效期：{{formatDateTime(coupon.startTime, 'yyyy-MM-dd')}}至{{formatDateTime(coupon.endTime, 'yyyy-MM-dd')}}</view>
|
||||
<view class="d-flex font-size-sm text-color-base mb-20">领取时间：{{ coupon.createtime_text }}</view>
|
||||
@@ -44,7 +68,7 @@
|
||||
<view class="d-flex font-size-sm text-color-base mb-20">适用范围：{{ typeInfo(coupon.type) }}</view>
|
||||
<view class="d-flex font-size-sm text-color-base mb-20">适用店铺：{{ coupon.shopName }}</view>
|
||||
<view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 0">
|
||||
<button type="primary" @tap="useCoupon" class="use-coupon-btn">立即使用</button>
|
||||
<button type="primary" @tap="useCoupon" class="packages-modal__btn">立即使用</button>
|
||||
</view>
|
||||
</view>
|
||||
</modal>
|
||||
@@ -55,17 +79,17 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
toRaw
|
||||
toRaw
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,prePage } from '@/utils/util'
|
||||
import {
|
||||
couponMine
|
||||
couponMine
|
||||
} from '@/api/coupon'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -82,7 +106,7 @@ const shop_id = ref(0)
|
||||
const type = ref(0)
|
||||
const uToast = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
onLoad((options) => {
|
||||
if (options.amount) {
|
||||
amount.value = options.amount;
|
||||
}
|
||||
@@ -176,198 +200,170 @@ const useCoupon = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 选券页局部 token（与 uni.scss 全局变量配合）
|
||||
$packages-list-offset-nav: 120rpx;
|
||||
$packages-list-margin-top: $spacing-row-lg;
|
||||
$packages-list-padding-x: $spacing-row-base;
|
||||
$packages-item-gap: $spacing-row-lg;
|
||||
$packages-item-radius: $border-radius-base;
|
||||
$packages-notch-size: 30rpx;
|
||||
$packages-notch-offset: 65rpx;
|
||||
$packages-ticket-radius: 20rpx;
|
||||
$packages-ticket-divider: $border-color-light;
|
||||
$packages-ticket-left-width: 70%;
|
||||
$packages-ticket-right-width: 30%;
|
||||
$packages-ticket-padding: $spacing-row-base;
|
||||
$packages-ticket-right-padding-y: 40rpx;
|
||||
$packages-picture-size: 190rpx;
|
||||
$packages-amount-font-size: 60rpx;
|
||||
$packages-date-font-size: 20rpx;
|
||||
$packages-intro-gap: 10rpx;
|
||||
$packages-btn-radius: 40rpx;
|
||||
$packages-btn-padding-x: 20rpx;
|
||||
$packages-btn-line-height: 40rpx;
|
||||
$packages-btn-margin-left: 20rpx;
|
||||
$packages-selected-border-width: 1rpx;
|
||||
$packages-modal-btn-width: 95%;
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.container {
|
||||
.packages-page {
|
||||
--packages-picture-size: #{$packages-picture-size};
|
||||
--packages-list-offset-nav: #{$packages-list-offset-nav};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.packages-list {
|
||||
margin-top: $packages-list-margin-top;
|
||||
height: calc(100vh - var(--packages-list-offset-nav));
|
||||
|
||||
.coupon-list {
|
||||
margin-top: 30rpx;
|
||||
height:calc(100vh - 120rpx);
|
||||
// height: calc(100vh - 120rpx - 200rpx);
|
||||
/* #ifdef H5 */
|
||||
// height: calc(100vh - 120rpx - 200rpx - 44px);
|
||||
height: calc(100vh - var(--packages-list-offset-nav) - 44px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.coupon {
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
//padding: 0 30rpx;
|
||||
border-radius: 6rpx;
|
||||
box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: 65rpx;
|
||||
left: -15rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: 65rpx;
|
||||
right: -15rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 20rpx 0;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 1rpx dashed #c6c6c6;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.coupon-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
}
|
||||
padding: 0 $packages-list-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.use-coupon-btn {
|
||||
width: 95%;
|
||||
border-radius: 50rem !important;
|
||||
.packages-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-bottom: $packages-item-gap;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $packages-item-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: $packages-notch-offset;
|
||||
width: $packages-notch-size;
|
||||
height: $packages-notch-size;
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: calc(-1 * #{$packages-notch-size} / 2);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: calc(-1 * #{$packages-notch-size} / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.taobao {
|
||||
background-color: white;
|
||||
.title {
|
||||
.packages-ticket {
|
||||
background-color: $text-color-white;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
|
||||
&--selected {
|
||||
border: $packages-selected-border-width solid $color-error;
|
||||
border-radius: $packages-ticket-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
width: $packages-ticket-left-width;
|
||||
padding: $packages-ticket-padding;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $packages-ticket-radius;
|
||||
border-right: dashed 2rpx $packages-ticket-divider;
|
||||
}
|
||||
|
||||
&__picture {
|
||||
flex-shrink: 0;
|
||||
width: var(--packages-picture-size);
|
||||
height: var(--packages-picture-size);
|
||||
border-radius: $packages-ticket-radius;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
margin-left: $packages-intro-gap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: $font-size-base;
|
||||
color: $uv-warning;
|
||||
|
||||
.packages-ticket__amount {
|
||||
margin-right: $packages-intro-gap;
|
||||
font-size: $packages-amount-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__type {
|
||||
font-size: $font-size-base;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-top: $packages-intro-gap;
|
||||
font-size: $packages-date-font-size;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 30rpx;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.store {
|
||||
font-weight: 500;
|
||||
}
|
||||
.buddha {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.entrance {
|
||||
color: $uv-info;
|
||||
border: solid 2rpx $uv-info;
|
||||
line-height: 48rpx;
|
||||
padding: 0 30rpx;
|
||||
background: none;
|
||||
border-radius: 15px;
|
||||
}
|
||||
width: $packages-ticket-right-width;
|
||||
padding: $packages-ticket-right-padding-y $packages-ticket-padding;
|
||||
background-color: $text-color-white;
|
||||
border-radius: $packages-ticket-radius;
|
||||
}
|
||||
.ticket {
|
||||
display: flex;
|
||||
.left {
|
||||
width: 70%;
|
||||
padding: 20rpx;
|
||||
background-color: white; //rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
border-right: dashed 2rpx rgb(224, 215, 211);
|
||||
display: flex;
|
||||
.picture {
|
||||
//width: 172rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 190rpx;
|
||||
height: 190rpx;
|
||||
}
|
||||
.introduce {
|
||||
margin-left: 10rpx;
|
||||
.top {
|
||||
color: $uv-warning;
|
||||
font-size: 28rpx;
|
||||
.big {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.type {
|
||||
font-size: 28rpx;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
.date {
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: $uv-info-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 30%;
|
||||
padding: 40rpx 20rpx;
|
||||
background-color: white; //rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.use {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #ffffff !important;
|
||||
background-color: $uv-warning !important;
|
||||
line-height: 40rpx;
|
||||
color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.used {
|
||||
height: auto;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40rpx;
|
||||
//color: #ffffff!important;
|
||||
//background-color: $u-type-warning!important;
|
||||
line-height: 40rpx;
|
||||
//color: rgb(117, 142, 165);
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
.right_log {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
padding: 80rpx 0rpx;
|
||||
background-color: white; //rgb(255, 245, 244);
|
||||
border-radius: 20rpx;
|
||||
|
||||
align-items: center;
|
||||
&__btn {
|
||||
height: auto;
|
||||
margin-left: $packages-btn-margin-left;
|
||||
padding: 0 $packages-btn-padding-x;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $packages-btn-line-height;
|
||||
border-radius: $packages-btn-radius;
|
||||
color: $text-color-white !important;
|
||||
|
||||
&--use {
|
||||
background-color: $uv-warning !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.packages-modal__btn {
|
||||
width: $packages-modal-btn-width;
|
||||
border-radius: 50rem !important;
|
||||
}
|
||||
</style>
|
||||
@@ -5,11 +5,11 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container position-relative">
|
||||
<view style="margin-bottom: 130rpx;">
|
||||
<view class="section-1">
|
||||
<view class="pay-page container position-relative">
|
||||
<view class="pay-page__content">
|
||||
<view class="pay-page__section">
|
||||
<template v-if="store.distance > 0">
|
||||
<list-cell class="location">
|
||||
<list-cell class="pay-page__cell pay-page__cell--location">
|
||||
<view class="flex-fill d-flex justify-content-between align-items-center">
|
||||
<view class="store-name flex-fill">{{ orderType == 'takeout' ? '外卖配送' : '点餐自取' }}</view>
|
||||
<uv-switch activeColor="#09b4f1" v-model="active" @change="takout">
|
||||
@@ -25,7 +25,7 @@
|
||||
<view class="font-size-lg text-color-base">
|
||||
{{ address.address + ' ' + address.detail }}
|
||||
</view>
|
||||
<image src="/static/images/navigator-1.png" class="arrow"></image>
|
||||
<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
|
||||
</view>
|
||||
<view class="d-flex text-color-assist font-size-sm align-items-center">
|
||||
<view class="mr-10">{{ address.realName }}</view>
|
||||
@@ -34,24 +34,24 @@
|
||||
</view>
|
||||
<view v-else class="flex-fill d-flex justify-content-between align-items-center">
|
||||
<view class="store-name flex-fill">选择收货地址</view>
|
||||
<image src="/static/images/navigator-1.png" class="arrow"></image>
|
||||
<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
|
||||
</view>
|
||||
</list-cell>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<view class="section-1">
|
||||
<view class="pay-page__section">
|
||||
<template>
|
||||
<list-cell class="location" @click="goToShop">
|
||||
<list-cell class="pay-page__cell pay-page__cell--location" @click="goToShop">
|
||||
<view class="flex-fill d-flex justify-content-between align-items-center">
|
||||
<view class="store-name flex-fill">{{ store.name }}</view>
|
||||
<image src="/static/images/navigator-1.png" class="arrow"></image>
|
||||
<image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
|
||||
</view>
|
||||
</list-cell>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<list-cell arrow class="meal-time" v-if="orderType == 'takein'">
|
||||
<list-cell arrow class="pay-page__cell pay-page__cell--meal-time" v-if="orderType == 'takein'">
|
||||
<view class="flex-fill d-flex justify-content-between align-items-center"
|
||||
@click="takeinTIme = !takeinTIme">
|
||||
<view class="title">取餐时间</view>
|
||||
@@ -63,12 +63,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell class="contact" last :hover="false" v-if="orderType == 'takein'">
|
||||
<list-cell class="pay-page__cell pay-page__cell--contact" last :hover="false" v-if="orderType == 'takein'">
|
||||
<view class="flex-fill d-flex justify-content-between align-items-center">
|
||||
<view class="title flex-fill">联系电话</view>
|
||||
<view class="time"><input class="text-right" placeholder="请输入手机号码" :value="member.mobile" />
|
||||
</view>
|
||||
<button class="contact-tip font-size-sm">自动填写</button>
|
||||
<button class="pay-page__contact-tip font-size-sm">自动填写</button>
|
||||
</view>
|
||||
</list-cell>
|
||||
</template>
|
||||
@@ -88,17 +88,17 @@
|
||||
</template>
|
||||
</view>
|
||||
<!-- 购物车列表 begin -->
|
||||
<view class="section-2">
|
||||
<view class="cart d-flex flex-column">
|
||||
<view class="pay-page__section pay-page__section--cart">
|
||||
<view class="pay-page__cart d-flex flex-column">
|
||||
<list-cell last v-for="(item, index) in cart" :key="index">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="d-flex align-items-center mb-10">
|
||||
<view
|
||||
class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
|
||||
<image style="width: 80rpx;height: 80rpx;" mode="aspectFill" :src="item.image">
|
||||
<image class="pay-page__cart-thumb" mode="aspectFill" :src="item.image">
|
||||
</image>
|
||||
</view>
|
||||
<view class="name-and-props overflow-hidden">
|
||||
<view class="pay-page__cart-name overflow-hidden">
|
||||
<view class="text-color-base font-size-lg">{{ item.name }}</view>
|
||||
</view>
|
||||
<view
|
||||
@@ -134,47 +134,46 @@
|
||||
</list-cell>
|
||||
</view>
|
||||
<!-- 购物车列表 end -->
|
||||
<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
|
||||
style="padding: 20rpx 0;">
|
||||
<view class="pay-page__notice d-flex align-items-center justify-content-start font-size-sm text-color-warning">
|
||||
</view>
|
||||
<!-- 支付方式 begin -->
|
||||
<view class="payment">
|
||||
<view class="pay-page__payment">
|
||||
<list-cell last :hover="false"><text>支付方式</text></list-cell>
|
||||
<list-cell>
|
||||
<view class="d-flex align-items-center justify-content-between w-100 disabled"
|
||||
<view class="pay-page__payment-row pay-page__payment-row--disabled d-flex align-items-center justify-content-between w-100"
|
||||
@click="setPayType('yue')">
|
||||
<view class="iconfont iconbalance line-height-100 payment-icon"></view>
|
||||
<view class="iconfont iconbalance line-height-100 pay-page__payment-icon"></view>
|
||||
<view class="flex-fill">余额支付（余额￥{{ member.nowMoney }}）</view>
|
||||
<view class="font-size-sm" v-if="member.nowMoney == 0">余额不足</view>
|
||||
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'yue'">
|
||||
<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'yue'">
|
||||
</view>
|
||||
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
|
||||
<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell last>
|
||||
<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
|
||||
<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A"></view>
|
||||
<view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
|
||||
<view class="iconfont iconwxpay line-height-100 pay-page__payment-icon pay-page__payment-icon--wechat"></view>
|
||||
<view class="flex-fill">微信支付</view>
|
||||
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'weixin'">
|
||||
<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'weixin'">
|
||||
</view>
|
||||
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
|
||||
<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<!-- #ifdef H5 -->
|
||||
<list-cell>
|
||||
<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')">
|
||||
<view class="iconfont-yshop icon-alipay line-height-100 payment-icon" style="color:#07b4fd" ></view>
|
||||
<view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')">
|
||||
<view class="iconfont-yshop icon-alipay line-height-100 pay-page__payment-icon pay-page__payment-icon--alipay"></view>
|
||||
<view class="flex-fill">支付宝</view>
|
||||
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'alipay'" ></view>
|
||||
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else ></view>
|
||||
<view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'alipay'" ></view>
|
||||
<view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else ></view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<!-- 支付方式 end -->
|
||||
<!-- 备注 begin -->
|
||||
<list-cell last @click="goToRemark">
|
||||
<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden" style="margin-bottom: 110rpx;">
|
||||
<list-cell last @click="goToRemark">
|
||||
<view class="pay-page__remark d-flex flex-fill align-items-center justify-content-between overflow-hidden">
|
||||
<view class="flex-shrink-0 mr-20">备注</view>
|
||||
<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}
|
||||
</view>
|
||||
@@ -183,21 +182,20 @@
|
||||
<!-- 备注 end -->
|
||||
</view>
|
||||
<!-- 付款栏 begin -->
|
||||
<view style="z-index: 1;"
|
||||
class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
|
||||
<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
|
||||
<view class="font-size-lg flex-fill">￥{{ amount }}</view>
|
||||
<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
|
||||
style="padding: 0 60rpx;" @tap="debounce(submit, 500)">付款</view>
|
||||
<view class="pay-page__footer w-100 position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
|
||||
<view class="pay-page__footer-label font-size-sm">合计：</view>
|
||||
<view class="pay-page__footer-amount font-size-lg flex-fill">￥{{ amount }}</view>
|
||||
<view class="pay-page__footer-btn bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
|
||||
@tap="debounce(submit, 500)">付款</view>
|
||||
</view>
|
||||
<!-- 付款栏 end -->
|
||||
<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="'0rpx'" width="90%">
|
||||
<view class="modal-content">
|
||||
<view class="pay-page__modal">
|
||||
<view class="d-flex justify-content-end">
|
||||
<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;"
|
||||
<image src="/static/images/pay/close.png" class="pay-page__modal-close"
|
||||
@tap="ensureAddressModalVisible = false"></image>
|
||||
</view>
|
||||
<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;">
|
||||
<view class="pay-page__modal-title d-flex just-content-center align-items-center">
|
||||
<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
|
||||
</view>
|
||||
<view
|
||||
@@ -206,11 +204,11 @@
|
||||
<view>{{ address.phone }}</view>
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
|
||||
<view style="max-width: 60%;">{{ address.address + address.detail }}</view>
|
||||
<button type="primary" size="mini" plain class="change-address-btn" style="white-space: nowrap;"
|
||||
<view class="pay-page__modal-address">{{ address.address + address.detail }}</view>
|
||||
<button type="primary" size="mini" plain class="pay-page__modal-change-btn"
|
||||
@click="chooseAddress">修改地址</button>
|
||||
</view>
|
||||
<button type="primary" class="pay_btn" @tap="debounce(pay, 500)">确认并付款</button>
|
||||
<button type="primary" class="pay-page__modal-submit" @tap="debounce(pay, 500)">确认并付款</button>
|
||||
</view>
|
||||
</modal>
|
||||
<uv-toast ref="uToast"></uv-toast>
|
||||
@@ -706,125 +704,166 @@ const aliPay = async(order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
// 支付页局部 token（与 uni.scss 全局变量配合）
|
||||
$pay-page-padding: $spacing-row-lg;
|
||||
$pay-page-section-gap: $spacing-row-lg;
|
||||
$pay-page-content-offset: 130rpx;
|
||||
$pay-arrow-size: 50rpx;
|
||||
$pay-arrow-offset-right: -10rpx;
|
||||
$pay-cart-name-width: 65%;
|
||||
$pay-payment-icon-size: 44rpx;
|
||||
$pay-checkbox-size: 36rpx;
|
||||
$pay-checkbox-gap: 10rpx;
|
||||
$pay-payment-gap: 10rpx;
|
||||
$pay-footer-height: 100rpx;
|
||||
$pay-footer-shadow: 0 0 20rpx rgba($color: #000, $alpha: 0.1);
|
||||
$pay-footer-z-index: 1;
|
||||
$pay-footer-label-margin: $spacing-row-base;
|
||||
$pay-footer-btn-padding-x: 60rpx;
|
||||
$pay-remark-margin-bottom: 110rpx;
|
||||
$pay-notice-padding-y: $spacing-row-base;
|
||||
$pay-wechat-color: #7eb73a;
|
||||
$pay-alipay-color: #07b4fd;
|
||||
$pay-modal-close-size: 40rpx;
|
||||
$pay-modal-title-margin-bottom: 40px;
|
||||
$pay-modal-address-max-width: 60%;
|
||||
$pay-contact-tip-border-width: 2rpx;
|
||||
$pay-contact-tip-padding-y: 6rpx;
|
||||
$pay-contact-tip-padding-x: 10rpx;
|
||||
$pay-contact-tip-margin-left: 10rpx;
|
||||
$pay-modal-btn-radius: 50rem;
|
||||
$pay-modal-btn-line-height: 3;
|
||||
$pay-modal-change-btn-line-height: 2;
|
||||
|
||||
.pay-page {
|
||||
padding: $pay-page-padding;
|
||||
--pay-cart-thumb-size: #{$img-size-lg};
|
||||
|
||||
&__content {
|
||||
margin-bottom: $pay-page-content-offset;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
&__section {
|
||||
margin-bottom: $pay-page-section-gap;
|
||||
|
||||
&--cart {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
position: relative;
|
||||
margin-right: -10rpx;
|
||||
width: $pay-arrow-size;
|
||||
height: $pay-arrow-size;
|
||||
margin-right: $pay-arrow-offset-right;
|
||||
}
|
||||
|
||||
.location {
|
||||
&__cell--location {
|
||||
.store-name {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
font-size: $pay-arrow-size;
|
||||
line-height: 100%;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.section-1 {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.contact {
|
||||
.contact-tip {
|
||||
margin-left: 10rpx;
|
||||
border: 2rpx solid $color-primary;
|
||||
padding: 6rpx 10rpx;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
&__contact-tip {
|
||||
margin-left: $pay-contact-tip-margin-left;
|
||||
padding: $pay-contact-tip-padding-y $pay-contact-tip-padding-x;
|
||||
border: $pay-contact-tip-border-width solid $color-primary;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
.name-and-props {
|
||||
width: 65%;
|
||||
}
|
||||
&__cart-name {
|
||||
width: $pay-cart-name-width;
|
||||
}
|
||||
|
||||
.payment {
|
||||
margin-bottom: 30rpx;
|
||||
&__cart-thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--pay-cart-thumb-size);
|
||||
height: var(--pay-cart-thumb-size);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&__notice {
|
||||
padding: $pay-notice-padding-y 0;
|
||||
}
|
||||
|
||||
&__payment {
|
||||
margin-bottom: $pay-page-section-gap;
|
||||
}
|
||||
|
||||
&__payment-row {
|
||||
&--disabled {
|
||||
color: $text-color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
font-size: 44rpx;
|
||||
margin-right: 10rpx;
|
||||
&__payment-icon {
|
||||
margin-right: $pay-payment-gap;
|
||||
font-size: $pay-payment-icon-size;
|
||||
|
||||
&--wechat {
|
||||
color: $pay-wechat-color;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
font-size: 36rpx;
|
||||
margin-left: 10rpx;
|
||||
&--alipay {
|
||||
color: $pay-alipay-color;
|
||||
}
|
||||
}
|
||||
|
||||
.checked {
|
||||
&__checkbox {
|
||||
margin-left: $pay-checkbox-gap;
|
||||
font-size: $pay-checkbox-size;
|
||||
|
||||
&--checked {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
||||
height: 100rpx;
|
||||
&__remark {
|
||||
margin-bottom: $pay-remark-margin-bottom;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.change-address-btn {
|
||||
line-height: 2;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
width: 100%;
|
||||
border-radius: 50rem !important;
|
||||
line-height: 3;
|
||||
}
|
||||
&__footer {
|
||||
z-index: $pay-footer-z-index;
|
||||
height: $pay-footer-height;
|
||||
box-shadow: $pay-footer-shadow;
|
||||
}
|
||||
|
||||
.choice {
|
||||
background-color: $bg-color-grey;
|
||||
border-radius: 38rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sm;
|
||||
padding: 0 38rpx;
|
||||
color: $text-color-assist;
|
||||
|
||||
.dinein,
|
||||
.takeout {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
padding: 14rpx 38rpx;
|
||||
color: #ffffff;
|
||||
background-color: $color-primary;
|
||||
border-radius: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.takeout {
|
||||
margin-left: 20rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 14rpx 0;
|
||||
}
|
||||
|
||||
.dinein.active {
|
||||
//margin-left: -38rpx;
|
||||
}
|
||||
|
||||
.takeout.active {
|
||||
//margin-right: -38rpx;
|
||||
}
|
||||
&__footer-label {
|
||||
margin-left: $pay-footer-label-margin;
|
||||
}
|
||||
|
||||
&__footer-btn {
|
||||
padding: 0 $pay-footer-btn-padding-x;
|
||||
}
|
||||
|
||||
&__modal-close {
|
||||
width: $pay-modal-close-size;
|
||||
height: $pay-modal-close-size;
|
||||
}
|
||||
|
||||
&__modal-title {
|
||||
margin-bottom: $pay-modal-title-margin-bottom;
|
||||
}
|
||||
|
||||
&__modal-address {
|
||||
max-width: $pay-modal-address-max-width;
|
||||
}
|
||||
|
||||
&__modal-change-btn {
|
||||
line-height: $pay-modal-change-btn-line-height;
|
||||
padding: 0 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__modal-submit {
|
||||
width: 100%;
|
||||
line-height: $pay-modal-btn-line-height;
|
||||
border-radius: $pay-modal-btn-radius !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,113 +5,184 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container w-100 h-100 overflow-hidden">
|
||||
<view class="textarea">
|
||||
<textarea placeholder-class="text-color-assist font-size-base" v-model="remark"
|
||||
class="bg-white w-100 border-box font-size-base remark"
|
||||
:class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}"
|
||||
placeholder="请填写备注信息" focus/>
|
||||
<view class="tips" :class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}">
|
||||
<view class="remark-page w-100 h-100 overflow-hidden">
|
||||
<view class="remark-page__textarea">
|
||||
<textarea
|
||||
placeholder-class="text-color-assist font-size-base"
|
||||
v-model="remark"
|
||||
class="remark-page__input w-100 border-box font-size-base"
|
||||
:class="isDanger ? 'remark-page__input--danger' : 'remark-page__input--assist'"
|
||||
placeholder="请填写备注信息"
|
||||
focus
|
||||
/>
|
||||
<view
|
||||
class="remark-page__counter"
|
||||
:class="isDanger ? 'remark-page__counter--danger' : 'remark-page__counter--assist'"
|
||||
>
|
||||
{{ remarkLength }}/50
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex font-size-base text-color-assist" style="margin: 40rpx 0;">
|
||||
<view class="remark-page__label font-size-base text-color-assist">
|
||||
快捷输入
|
||||
</view>
|
||||
<view class="quick-inputs d-flex flex-wrap justify-content-start">
|
||||
<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)">
|
||||
<view class="remark-page__quick-list">
|
||||
<view
|
||||
class="remark-page__quick-item"
|
||||
v-for="(item, index) in quickInputs"
|
||||
:key="index"
|
||||
@tap="handleQuickInput(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex just-content-center align-items-center" style="margin-top: 60rpx;">
|
||||
<button type="primary" class="submit-btn font-size-base" @tap="submit">完成</button>
|
||||
<view class="remark-page__actions">
|
||||
<button type="primary" class="remark-page__submit-btn font-size-base" @tap="submit">完成</button>
|
||||
</view>
|
||||
<!--轻提示-->
|
||||
<uv-toast ref="uToast"></uv-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
computed
|
||||
} from 'vue'
|
||||
import { onLoad} from '@dcloudio/uni-app'
|
||||
|
||||
const title = ref('备注')
|
||||
const remark = ref('')
|
||||
const quickInputs = ref( ['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
|
||||
const quickInputs = ref(['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
|
||||
const uToast = ref()
|
||||
|
||||
|
||||
onLoad((opt) => {
|
||||
remark.value = opt.remark
|
||||
})
|
||||
})
|
||||
|
||||
const remarkLength = computed(() => {
|
||||
const remarkLength = computed(() => {
|
||||
return remark.value.length
|
||||
})
|
||||
const isDanger = computed(() => {
|
||||
const isDanger = computed(() => {
|
||||
return remark.value.length > 50
|
||||
})
|
||||
|
||||
const handleQuickInput = (item) => {
|
||||
remark.value = remark.value.concat(" ", item)
|
||||
remark.value = remark.value.concat(' ', item)
|
||||
}
|
||||
const submit = () => {
|
||||
if (remark.value.length > 50) {
|
||||
uToast.value.show({
|
||||
message: '不能超过50个字符',
|
||||
type: 'error'
|
||||
});
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pages/components/pages/pay/pay?remark=" + remark.value
|
||||
url: '/pages/components/pages/pay/pay?remark=' + remark.value
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 30rpx 40rpx;
|
||||
|
||||
.textarea {
|
||||
position: relative;
|
||||
|
||||
.remark {
|
||||
border-radius: 8rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
height: 320rpx;
|
||||
color: $font-size-base;
|
||||
}
|
||||
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 40rpx;
|
||||
}
|
||||
$remark-page-padding-y: 30rpx;
|
||||
$remark-page-padding-x: 40rpx;
|
||||
$remark-textarea-radius: 8rpx;
|
||||
$remark-textarea-padding-y: 30rpx;
|
||||
$remark-textarea-padding-x: 40rpx;
|
||||
$remark-textarea-height: 320rpx;
|
||||
$remark-counter-offset-y: 30rpx;
|
||||
$remark-counter-offset-x: 40rpx;
|
||||
$remark-label-margin-y: 40rpx;
|
||||
$remark-quick-list-padding-right: 20rpx;
|
||||
$remark-quick-item-padding-y: 16rpx;
|
||||
$remark-quick-item-padding-x: 26rpx;
|
||||
$remark-quick-item-gap: 20rpx;
|
||||
$remark-quick-item-border-width: 2rpx;
|
||||
$remark-actions-margin-top: 60rpx;
|
||||
$remark-submit-btn-width: 90%;
|
||||
$remark-submit-btn-height: 80rpx;
|
||||
$remark-submit-btn-radius: 40rpx;
|
||||
|
||||
.remark-page {
|
||||
--remark-page-padding-y: #{$remark-page-padding-y};
|
||||
--remark-page-padding-x: #{$remark-page-padding-x};
|
||||
--remark-textarea-padding-y: #{$remark-textarea-padding-y};
|
||||
--remark-textarea-padding-x: #{$remark-textarea-padding-x};
|
||||
--remark-textarea-height: #{$remark-textarea-height};
|
||||
--remark-counter-offset-y: #{$remark-counter-offset-y};
|
||||
--remark-counter-offset-x: #{$remark-counter-offset-x};
|
||||
--remark-submit-btn-width: #{$remark-submit-btn-width};
|
||||
--remark-submit-btn-height: #{$remark-submit-btn-height};
|
||||
|
||||
padding: var(--remark-page-padding-y) var(--remark-page-padding-x);
|
||||
|
||||
&__textarea {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__input {
|
||||
border-radius: $remark-textarea-radius;
|
||||
padding: var(--remark-textarea-padding-y) var(--remark-textarea-padding-x);
|
||||
height: var(--remark-textarea-height);
|
||||
background-color: $text-color-white;
|
||||
color: $text-color-base;
|
||||
|
||||
&--danger {
|
||||
color: $color-error;
|
||||
}
|
||||
|
||||
.quick-inputs {
|
||||
padding-right: 20rpx;
|
||||
|
||||
.quick-input {
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid $color-primary;
|
||||
color: $color-primary;
|
||||
font-size: $font-size-base;
|
||||
padding: 16rpx 26rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
&--assist {
|
||||
color: $text-color-assist;
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
position: absolute;
|
||||
bottom: var(--remark-counter-offset-y);
|
||||
right: var(--remark-counter-offset-x);
|
||||
font-size: $font-size-base;
|
||||
|
||||
&--danger {
|
||||
color: $color-error;
|
||||
}
|
||||
|
||||
&--assist {
|
||||
color: $text-color-assist;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin: $remark-label-margin-y 0;
|
||||
}
|
||||
|
||||
&__quick-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding-right: $remark-quick-list-padding-right;
|
||||
}
|
||||
|
||||
&__quick-item {
|
||||
background-color: $text-color-white;
|
||||
border: $remark-quick-item-border-width solid $color-primary;
|
||||
color: $color-primary;
|
||||
font-size: $font-size-base;
|
||||
padding: $remark-quick-item-padding-y $remark-quick-item-padding-x;
|
||||
margin-right: $remark-quick-item-gap;
|
||||
margin-bottom: $remark-quick-item-gap;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: $remark-actions-margin-top;
|
||||
}
|
||||
|
||||
&__submit-btn {
|
||||
width: var(--remark-submit-btn-width);
|
||||
height: var(--remark-submit-btn-height);
|
||||
border-radius: $remark-submit-btn-radius;
|
||||
line-height: var(--remark-submit-btn-height);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +1,99 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="px-2 mt-2">
|
||||
<view class="bg-white p-2" >
|
||||
<uv-form :model="form" ref="uForm" >
|
||||
<uv-form-item>
|
||||
<view v-if="address.realName">
|
||||
<view>{{ address.address }} {{ address.detail }}</view>
|
||||
<text>{{ address.realName }} {{ address.phone }}</text>
|
||||
</view>
|
||||
<view v-else>请选择收货地址</view>
|
||||
<template #right>
|
||||
<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
</uv-form>
|
||||
</view>
|
||||
<view class="bg-white p-2 mt-2">
|
||||
<view class="mb-5">积分商城</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="flex">
|
||||
<image :src="product.image" mode="aspectFill" class="image"></image>
|
||||
<text class="font-size-medium">{{ product.title }}</text>
|
||||
</view>
|
||||
<view class="flex flex-column">
|
||||
<text class="font-size-medium">{{ product.score }}积分</text>
|
||||
<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between mt-5">
|
||||
<text class="font-size-medium">积分抵扣</text>
|
||||
<text class="font-size-medium">{{ product.score }}</text>
|
||||
</view>
|
||||
<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed-bottom flex justify-between align-center bg-white ">
|
||||
<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
|
||||
<view><uv-button type="warning" color="#ffcc00" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="px-2 mt-2 score-product-confirm">
|
||||
<view class="bg-white p-2" >
|
||||
<uv-form :model="form" ref="uForm" >
|
||||
<uv-form-item>
|
||||
<view v-if="address.realName">
|
||||
<view>{{ address.address }} {{ address.detail }}</view>
|
||||
<text>{{ address.realName }} {{ address.phone }}</text>
|
||||
</view>
|
||||
<view v-else>请选择收货地址</view>
|
||||
<template #right>
|
||||
<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
</uv-form>
|
||||
</view>
|
||||
<view class="bg-white p-2 mt-2">
|
||||
<view class="mb-5">积分商城</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="flex">
|
||||
<image :src="product.image" mode="aspectFill" class="score-product-confirm__thumb"></image>
|
||||
<text class="font-size-medium">{{ product.title }}</text>
|
||||
</view>
|
||||
<view class="flex flex-column">
|
||||
<text class="font-size-medium">{{ product.score }}积分</text>
|
||||
<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between mt-5">
|
||||
<text class="font-size-medium">积分抵扣</text>
|
||||
<text class="font-size-medium">{{ product.score }}</text>
|
||||
</view>
|
||||
<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed-bottom flex justify-between align-center bg-white ">
|
||||
<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
|
||||
<view><uv-button type="warning" :color="scoreProductAccent" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
scoreShopDetail
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const main = useMainStore()
|
||||
const { address,isLogin} = storeToRefs(main)
|
||||
|
||||
const title = ref("确认订单")
|
||||
const product = ref({})
|
||||
|
||||
const customStyle = computed(() =>{
|
||||
return {
|
||||
paddingLeft:'60rpx',
|
||||
paddingRight:'60rpx'
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
console.log('address:',address.value)
|
||||
if(!isLogin.value) {
|
||||
uni.navigateTo({url: '/pages/components/pages/login/login'})
|
||||
}
|
||||
product.value = cookie.get('score_product')
|
||||
|
||||
})
|
||||
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const main = useMainStore()
|
||||
const { address,isLogin} = storeToRefs(main)
|
||||
|
||||
const title = ref("确认订单")
|
||||
const product = ref({})
|
||||
|
||||
const scoreProductAccent = '#ffcc00'
|
||||
|
||||
const customStyle = computed(() => {
|
||||
return {
|
||||
paddingLeft: '60rpx',
|
||||
paddingRight: '60rpx'
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
console.log('address:',address.value)
|
||||
if(!isLogin.value) {
|
||||
uni.navigateTo({url: '/pages/components/pages/login/login'})
|
||||
}
|
||||
product.value = cookie.get('score_product')
|
||||
|
||||
})
|
||||
|
||||
// 选择地址
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = async() => {
|
||||
if (!address.value.id) {
|
||||
@@ -105,25 +107,35 @@ const submit = async() => {
|
||||
productId: product.value.id,
|
||||
addressId: address.value.id,
|
||||
num: 1
|
||||
})
|
||||
})
|
||||
|
||||
if (data) {
|
||||
if (data) {
|
||||
cookie.remove('score_product')
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/order'
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/order'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$score-product-accent: #ffcc00;
|
||||
$score-product-confirm-thumb-size: 160rpx;
|
||||
$score-product-confirm-thumb-radius: 8rpx;
|
||||
|
||||
.score-product-confirm {
|
||||
--score-product-accent: #{$score-product-accent};
|
||||
--score-product-confirm-thumb-size: #{$score-product-confirm-thumb-size};
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--score-product-confirm-thumb-size);
|
||||
height: var(--score-product-confirm-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $score-product-confirm-thumb-radius;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +1,64 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container">
|
||||
<view class="carousel">
|
||||
<view class="container score-product-detail">
|
||||
<view class="score-product-detail__carousel">
|
||||
<swiper indicator-dots circular=true duration="400">
|
||||
<swiper-item class="swiper-item" v-for="(item,index) in product.images" :key="index">
|
||||
<view class="image-wrapper">
|
||||
<swiper-item class="score-product-detail__swiper-item" v-for="(item,index) in product.images" :key="index">
|
||||
<view class="score-product-detail__image-wrapper">
|
||||
<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="introduce-section" v-if="product.id">
|
||||
<text class="title">{{product.title}}</text>
|
||||
<view class="price-box bot-row">
|
||||
<view class="score-product-detail__intro" v-if="product.id">
|
||||
<text class="score-product-detail__title">{{product.title}}</text>
|
||||
<view class="score-product-detail__meta">
|
||||
<text>积分： {{product.score}}</text>
|
||||
<text>销量: {{product.sales}}</text>
|
||||
<text>库存: {{product.stock}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-desc" v-if="product.desc">
|
||||
<view class="score-product-detail__desc" v-if="product.desc">
|
||||
<rich-text :nodes="product.desc"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作菜单 -->
|
||||
<view class="fixed-bottom px-2">
|
||||
<button class="btn" @click="confirm">立即兑换</button>
|
||||
<button class="score-product-detail__btn" @click="confirm">立即兑换</button>
|
||||
</view>
|
||||
|
||||
<uv-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
scoreShopDetail
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const buttonText = ref("立即兑换")
|
||||
const specClass = ref('none')
|
||||
const product = ref({})
|
||||
const id = ref(false)
|
||||
const form = ref(
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const buttonText = ref("立即兑换")
|
||||
const specClass = ref('none')
|
||||
const product = ref({})
|
||||
const id = ref(false)
|
||||
const form = ref(
|
||||
{
|
||||
address: {
|
||||
id: 0,
|
||||
@@ -68,32 +68,32 @@ const form = ref(
|
||||
mobile: "",
|
||||
},
|
||||
num: 1 // 兑换数量
|
||||
}
|
||||
)
|
||||
const lock = ref(false)
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
getDetail(id.value);
|
||||
})
|
||||
|
||||
}
|
||||
)
|
||||
const lock = ref(false)
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
getDetail(id.value);
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
id.value = options.id;
|
||||
id.value = options.id;
|
||||
getDetail(options.id);
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 选择地址
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
cookie.set('score_product',product.value)
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/confirm'
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
cookie.set('score_product',product.value)
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/confirm'
|
||||
})
|
||||
}
|
||||
// 该表购买数量
|
||||
const valChange = (e) => {
|
||||
@@ -127,101 +127,94 @@ const previewImage = (index) => {
|
||||
indicator: "number",
|
||||
loop: true
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.icon-you {
|
||||
color: #888;
|
||||
}
|
||||
<style lang="scss">
|
||||
$score-product-accent: #ffcc00;
|
||||
$score-product-detail-carousel-height: 722rpx;
|
||||
$score-product-detail-swiper-height: 750rpx;
|
||||
$score-product-detail-intro-padding-y: 20rpx;
|
||||
$score-product-detail-intro-padding-x: 30rpx;
|
||||
$score-product-detail-title-height: 50rpx;
|
||||
$score-product-detail-meta-height: 64rpx;
|
||||
$score-product-detail-btn-height: 100rpx;
|
||||
$score-product-detail-btn-font-size: 40rpx;
|
||||
$score-product-detail-desc-margin-bottom: 200rpx;
|
||||
|
||||
.carousel {
|
||||
height: 722upx;
|
||||
.score-product-detail {
|
||||
--score-product-accent: #{$score-product-accent};
|
||||
|
||||
&__carousel {
|
||||
position: relative;
|
||||
height: $score-product-detail-carousel-height;
|
||||
|
||||
swiper {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
&__image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: $score-product-detail-swiper-height;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 750upx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 标题简介 */
|
||||
.introduce-section {
|
||||
background: #fff;
|
||||
padding: 20upx 30upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
color: #555555;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
height: 64upx;
|
||||
padding: 10upx 0;
|
||||
font-size: 30rpx;
|
||||
color: #5A5B5C;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.bot-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #ffcc00;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
margin: 30upx auto 20upx;
|
||||
|
||||
|
||||
&__intro {
|
||||
background-color: $text-color-white;
|
||||
padding: $score-product-detail-intro-padding-y $score-product-detail-intro-padding-x;
|
||||
}
|
||||
|
||||
/* 详情 */
|
||||
.detail-desc {
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
margin-bottom: 200rpx;
|
||||
padding: 20rpx;
|
||||
&__title {
|
||||
height: $score-product-detail-title-height;
|
||||
line-height: $score-product-detail-title-height;
|
||||
font-size: $font-size-lg;
|
||||
color: $color-subtitle;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $score-product-detail-meta-height;
|
||||
padding: 10rpx 0;
|
||||
font-size: $font-size-paragraph;
|
||||
color: $text-color-black;
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
height: $score-product-detail-btn-height;
|
||||
line-height: $score-product-detail-btn-height;
|
||||
margin: 30rpx auto 20rpx;
|
||||
border-radius: $score-product-detail-btn-height;
|
||||
background-color: var(--score-product-accent);
|
||||
font-size: $score-product-detail-btn-font-size;
|
||||
color: $text-color-white;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: $spacing-col-base;
|
||||
margin-bottom: $score-product-detail-desc-margin-bottom;
|
||||
padding: $spacing-row-base;
|
||||
background-color: $text-color-white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view>
|
||||
<!--商品区-->
|
||||
<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
|
||||
:right-gap="10"
|
||||
<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
|
||||
:right-gap="10"
|
||||
:column-gap="1">
|
||||
<template v-slot:list1>
|
||||
<view class="demo-warter" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
|
||||
<view class="demo-title">
|
||||
<view class="score-product-list__card" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
|
||||
<view class="score-product-list__title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="demo-price">
|
||||
<view class="score-product-list__score">
|
||||
消耗积分:{{item.score}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:list2>
|
||||
<view class="demo-warter" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
|
||||
<view class="demo-title">
|
||||
<view class="score-product-list__card" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
|
||||
<view class="score-product-list__title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="demo-price">
|
||||
<view class="score-product-list__score">
|
||||
消耗积分:{{item.score}}
|
||||
</view>
|
||||
</view>
|
||||
@@ -40,176 +40,134 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
} from 'vue'
|
||||
import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopIndex
|
||||
} from '@/api/score'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const title = ref('积分商品')
|
||||
const list = ref([])
|
||||
const page = ref(1)
|
||||
const pagesize = ref(10)
|
||||
const status = ref('loadmore')
|
||||
const list1 = ref([])
|
||||
const list2 = ref([])
|
||||
|
||||
const uWaterfall = ref()
|
||||
|
||||
let currentInstance = getCurrentInstance()
|
||||
|
||||
onShow(() => {
|
||||
getProduct()
|
||||
})
|
||||
|
||||
onReachBottom(async() => {
|
||||
if (status.value == 'loading') {
|
||||
return;
|
||||
}
|
||||
page.value++
|
||||
status.value = 'loading';
|
||||
let data = await scoreShopIndex({
|
||||
page: page.value,
|
||||
pagesize: pagesize.value
|
||||
});
|
||||
if (data) {
|
||||
list.value = list.value.concat(data);
|
||||
if (data.length == 0) {
|
||||
page.value--;
|
||||
status.value = 'nomore';
|
||||
} else if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
} from '@/api/score'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const title = ref('积分商品')
|
||||
const list = ref([])
|
||||
const page = ref(1)
|
||||
const pagesize = ref(10)
|
||||
const status = ref('loadmore')
|
||||
const list1 = ref([])
|
||||
const list2 = ref([])
|
||||
|
||||
const uWaterfall = ref()
|
||||
|
||||
let currentInstance = getCurrentInstance()
|
||||
|
||||
onShow(() => {
|
||||
getProduct()
|
||||
})
|
||||
|
||||
onReachBottom(async() => {
|
||||
if (status.value == 'loading') {
|
||||
return;
|
||||
}
|
||||
page.value++
|
||||
status.value = 'loading';
|
||||
let data = await scoreShopIndex({
|
||||
page: page.value,
|
||||
pagesize: pagesize.value
|
||||
});
|
||||
if (data) {
|
||||
list.value = list.value.concat(data);
|
||||
if (data.length == 0) {
|
||||
page.value--;
|
||||
status.value = 'nomore';
|
||||
} else if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
page.value = 1;
|
||||
getProduct()
|
||||
})
|
||||
|
||||
const changeList = (e) => {
|
||||
console.log('e:',e)
|
||||
if(e.name == 'list1'){
|
||||
list1.value.push(e.value)
|
||||
}else{
|
||||
list2.value.push(e.value)
|
||||
}
|
||||
|
||||
}
|
||||
const goDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
|
||||
getProduct()
|
||||
})
|
||||
|
||||
const changeList = (e) => {
|
||||
console.log('e:',e)
|
||||
if(e.name == 'list1'){
|
||||
list1.value.push(e.value)
|
||||
}else{
|
||||
list2.value.push(e.value)
|
||||
}
|
||||
|
||||
}
|
||||
const goDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
|
||||
})
|
||||
}
|
||||
const getProduct = async() => {
|
||||
const getProduct = async() => {
|
||||
status.value = 'loading';
|
||||
//proxy.$refs.uWaterfall.clear();
|
||||
//proxy.$refs.uWaterfall.clear();
|
||||
|
||||
let data = await scoreShopIndex({
|
||||
page: page.value,
|
||||
page: page.value,
|
||||
pagesize: pagesize.value
|
||||
});
|
||||
});
|
||||
console.log('data:',data)
|
||||
uni.stopPullDownRefresh();
|
||||
if (data) {
|
||||
list.value = data;
|
||||
console.log('data2:',list.value)
|
||||
if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
list.value = data;
|
||||
console.log('data2:',list.value)
|
||||
if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
}
|
||||
} else {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'nomore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
margin: 10rpx !important;
|
||||
}
|
||||
$score-product-accent: #ffcc00;
|
||||
$score-product-list-card-radius: 8px;
|
||||
$score-product-list-card-gap: 5px;
|
||||
$score-product-list-card-padding: 8px;
|
||||
$score-product-list-image-width: 300rpx;
|
||||
$score-product-list-title-gap: 5px;
|
||||
|
||||
.demo-warter {
|
||||
border-radius: 8px;
|
||||
margin: 5px;
|
||||
background-color: #ffcc00;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.score-product-list__card {
|
||||
--score-product-accent: #{$score-product-accent};
|
||||
--score-product-list-image-width: #{$score-product-list-image-width};
|
||||
|
||||
.demo-title {
|
||||
font-size: 30rpx;
|
||||
margin-top: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
position: relative;
|
||||
margin: $score-product-list-card-gap;
|
||||
padding: $score-product-list-card-padding;
|
||||
border-radius: $score-product-list-card-radius;
|
||||
background-color: var(--score-product-accent);
|
||||
}
|
||||
|
||||
.demo-tag {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.score-product-list__image {
|
||||
width: var(--score-product-list-image-width);
|
||||
}
|
||||
|
||||
.demo-tag-owner {
|
||||
background-color: $uv-error;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.score-product-list__title {
|
||||
margin-top: $score-product-list-title-gap;
|
||||
font-size: $font-size-paragraph;
|
||||
color: $text-color-white;
|
||||
}
|
||||
|
||||
.demo-tag-text {
|
||||
border: 1px solid $uv-primary;
|
||||
color: $uv-primary;
|
||||
margin-left: 10px;
|
||||
border-radius: 50rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.demo-price {
|
||||
font-size: 30rpx;
|
||||
color: $bg-color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.demo-shop {
|
||||
font-size: 32rpx;
|
||||
color: #cdad73;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 10px 0;
|
||||
|
||||
.demo-layout {
|
||||
text-align: center;
|
||||
background-color: #c6caca;
|
||||
border-radius: 20rpx;
|
||||
margin: 5px 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: #eea13c;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.score-product-list__score {
|
||||
margin-top: $score-product-list-title-gap;
|
||||
font-size: $font-size-paragraph;
|
||||
color: $bg-color;
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
<view class="container score-product-orders">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
</view>
|
||||
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
|
||||
<view class="score-product-orders__list d-flex flex-column w-100">
|
||||
<view class="score-product-orders-item" v-for="(item, index) in orders" :key="index">
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="flex-fill d-flex flex-column">
|
||||
@@ -24,101 +24,101 @@
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="flex ">
|
||||
<image :src="item.product.image" mode="aspectFill" class="image"></image>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="flex ">
|
||||
<image :src="item.product.image" mode="aspectFill" class="score-product-orders-item__thumb"></image>
|
||||
<view>
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base score-product-orders-item__title">
|
||||
{{ item.product.title }}
|
||||
</view>
|
||||
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-between align-items-center mt-3" >
|
||||
<view class="d-flex justify-content-between align-items-center score-product-orders-item__meta">
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{formatDateTime(item.createTime) }}
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-base align-items-center">
|
||||
<view style="margin-right: 10rpx;">共{{item.number }}件商品，消耗积分</view>
|
||||
<view class="score-product-orders-item__summary">共{{item.number }}件商品，消耗积分</view>
|
||||
<view class="font-size-lg"> {{ item.totalScore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end mt-3">
|
||||
<view class="d-flex align-items-center justify-content-end score-product-orders-item__actions">
|
||||
<view>
|
||||
<button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0"
|
||||
class="left-margin" type="primary" plain size="mini"
|
||||
@tap.stop="receive(item)">确认收到货</button>
|
||||
<button class="left-margin" plain size="mini" @tap="detail(item.id)">订单详情</button>
|
||||
class="score-product-orders-item__btn" type="primary" plain size="mini"
|
||||
@tap.stop="receive(item)">确认收到货</button>
|
||||
<button class="score-product-orders-item__btn" plain size="mini" @tap="detail(item.id)">订单详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-empty v-if="orders.length == 0" mode="order"></uv-empty>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
<uv-toast ref="uToast" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
scoreShopOrder,
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
scoreShopOrder,
|
||||
scoreShopReceive
|
||||
} from '@/api/score'
|
||||
const main = useMainStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { isLogin } = storeToRefs(main)
|
||||
const title = ref('我的积分订单')
|
||||
|
||||
const type = ref(-1)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const orders = ref([])
|
||||
const tabList = ref([{
|
||||
type: -1,
|
||||
name: '全部',
|
||||
}, {
|
||||
type: 0,
|
||||
name: '待发货',
|
||||
}, {
|
||||
type: 1,
|
||||
name: '待收货'
|
||||
}, {
|
||||
type: 2,
|
||||
name: '已完成'
|
||||
}]
|
||||
} from '@/api/score'
|
||||
const main = useMainStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { isLogin } = storeToRefs(main)
|
||||
const title = ref('我的积分订单')
|
||||
|
||||
const type = ref(-1)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const orders = ref([])
|
||||
const tabList = ref([{
|
||||
type: -1,
|
||||
name: '全部',
|
||||
}, {
|
||||
type: 0,
|
||||
name: '待发货',
|
||||
}, {
|
||||
type: 1,
|
||||
name: '待收货'
|
||||
}, {
|
||||
type: 2,
|
||||
name: '已完成'
|
||||
}]
|
||||
)
|
||||
onLoad(() => {
|
||||
if (!isLogin.value) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/login/login'
|
||||
})
|
||||
}
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
// tab栏切换
|
||||
const change = (e) => {
|
||||
type.value = e.type
|
||||
getOrders(true)
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
if (!isLogin.value) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/login/login'
|
||||
})
|
||||
}
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
// tab栏切换
|
||||
const change = (e) => {
|
||||
type.value = e.type
|
||||
getOrders(true)
|
||||
}
|
||||
|
||||
const getOrders = async(isRefresh = false) => {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
@@ -129,7 +129,7 @@ const getOrders = async(isRefresh = false) => {
|
||||
}
|
||||
let data = await scoreShopOrder({
|
||||
page: page.value,
|
||||
pagesize: pageSize.value,
|
||||
pagesize: pageSize.value,
|
||||
type: type.value
|
||||
});
|
||||
if (data.length > 0) {
|
||||
@@ -150,27 +150,67 @@ const receive = async(order) => {
|
||||
id: order.id
|
||||
});
|
||||
if (data) {
|
||||
proxy.$refs.uToast.show({
|
||||
message: '已签收',
|
||||
type: 'success',
|
||||
proxy.$refs.uToast.show({
|
||||
message: '已签收',
|
||||
type: 'success',
|
||||
})
|
||||
setTimeout(function() {
|
||||
getOrders(true)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-margin {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
$score-product-orders-list-padding-x: $spacing-row-base;
|
||||
$score-product-orders-list-padding-bottom: 0;
|
||||
$score-product-orders-item-gap: $spacing-row-lg;
|
||||
$score-product-orders-section-gap: $spacing-row-base;
|
||||
$score-product-orders-btn-gap: $spacing-row-base;
|
||||
$score-product-orders-summary-gap: $spacing-row-base;
|
||||
$score-product-orders-thumb-size: 160rpx;
|
||||
$score-product-orders-thumb-radius: 8rpx;
|
||||
|
||||
.score-product-orders {
|
||||
--score-product-orders-thumb-size: #{$score-product-orders-thumb-size};
|
||||
|
||||
&__list {
|
||||
padding: $score-product-orders-list-padding-x;
|
||||
padding-bottom: $score-product-orders-list-padding-bottom;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.score-product-orders-item {
|
||||
margin-bottom: $score-product-orders-item-gap;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $score-product-orders-section-gap;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--score-product-orders-thumb-size);
|
||||
height: var(--score-product-orders-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $score-product-orders-thumb-radius;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
margin-top: $score-product-orders-section-gap;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
margin-right: $score-product-orders-summary-gap;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-top: $score-product-orders-section-gap;
|
||||
}
|
||||
|
||||
&__btn + &__btn {
|
||||
margin-left: $score-product-orders-btn-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,16 +7,16 @@
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container" style="padding:20rpx;">
|
||||
<view style="padding-bottom: 100rpx;">
|
||||
<view class="container score-product-order-detail">
|
||||
<view class="score-product-order-detail__body">
|
||||
<view class="bg-white">
|
||||
<view class="section">
|
||||
<view class="score-product-order-detail__section">
|
||||
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
|
||||
<view class="w-100 d-flex flex-column position-relative score-product-order-detail__goods-preview">
|
||||
<view class="w-100 d-flex align-items-center mb-40">
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<image class="product-image" :src="order.product.image" mode="aspectFill"></image>
|
||||
<image class="score-product-order-detail__thumb" :src="order.product.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ order.product.title }}</view>
|
||||
@@ -29,29 +29,29 @@
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="score-product-order-detail__section">
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>消耗积分</view>
|
||||
<view class="font-weight-bold">{{ order.totalScore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="score-product-order-detail__section">
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>订单状态</view>
|
||||
<view class="font-weight-bold">{{ order.statusText }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>下单时间</view>
|
||||
<view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>订单号</view>
|
||||
<view class="font-weight-bold">{{ order.orderId }}</view>
|
||||
</view>
|
||||
@@ -60,7 +60,7 @@
|
||||
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>收货地址</view>
|
||||
</view>
|
||||
<view class="d-flex flex-column">
|
||||
@@ -73,13 +73,13 @@
|
||||
|
||||
<list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>快递公司</view>
|
||||
<view class="font-weight-bold">{{order.expressCompany }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view class="score-product-order-detail__cell">
|
||||
<view>快递单号</view>
|
||||
<view class="font-weight-bold">{{order.expressNumber }}<text class="copy" @click="copy()">复制</text></view>
|
||||
<view class="font-weight-bold">{{order.expressNumber }}<text class="score-product-order-detail__copy" @click="copy()">复制</text></view>
|
||||
<!-- <text class="copy" @click="copy()">复制</text> -->
|
||||
</view>
|
||||
</view>
|
||||
@@ -102,10 +102,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -114,7 +114,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
scoreShopOrderDetail,
|
||||
scoreShopReceive,
|
||||
getLogistic
|
||||
getLogistic
|
||||
} from '@/api/score'
|
||||
const main = useMainStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
@@ -169,20 +169,20 @@ const copy = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 确认收到货
|
||||
const receive = async(order) => {
|
||||
let data = await scoreShopReceive({
|
||||
id: order.id
|
||||
});
|
||||
if (data) {
|
||||
// 确认收到货
|
||||
const receive = async(order) => {
|
||||
let data = await scoreShopReceive({
|
||||
id: order.id
|
||||
});
|
||||
if (data) {
|
||||
proxy.$refs.uToast.show({
|
||||
message: '已签收',
|
||||
type: 'success',
|
||||
})
|
||||
setTimeout(function() {
|
||||
detail(order.id)
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
setTimeout(function() {
|
||||
detail(order.id)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -190,98 +190,83 @@ const receive = async(order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copy {
|
||||
color: #1296db;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
@mixin arch {
|
||||
content: "";
|
||||
$score-product-order-detail-padding: $spacing-row-base;
|
||||
$score-product-order-detail-body-padding-bottom: 100rpx;
|
||||
$score-product-order-detail-thumb-size: 140rpx;
|
||||
$score-product-order-detail-cell-gap: 40rpx;
|
||||
$score-product-order-detail-section-notch: 30rpx;
|
||||
$score-product-order-detail-section-notch-offset: 15rpx;
|
||||
$score-product-order-detail-goods-offset: -40rpx;
|
||||
$score-product-order-detail-copy-color: #1296db;
|
||||
$score-product-order-detail-copy-gap: $spacing-row-base;
|
||||
|
||||
@mixin score-product-order-detail-section-notch {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: -15rpx;
|
||||
bottom: calc(-1 * #{$score-product-order-detail-section-notch-offset});
|
||||
z-index: 10;
|
||||
border-radius: 100%;
|
||||
width: $score-product-order-detail-section-notch;
|
||||
height: $score-product-order-detail-section-notch;
|
||||
background-color: $bg-color;
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
|
||||
.section {
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
min-height: 100%;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.score-product-order-detail {
|
||||
padding: $score-product-order-detail-padding;
|
||||
--score-product-order-detail-thumb-size: #{$score-product-order-detail-thumb-size};
|
||||
|
||||
&__body {
|
||||
padding-bottom: $score-product-order-detail-body-padding-bottom;
|
||||
}
|
||||
|
||||
&__goods-preview {
|
||||
margin-bottom: $score-product-order-detail-goods-offset;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--score-product-order-detail-thumb-size);
|
||||
height: var(--score-product-order-detail-thumb-size);
|
||||
}
|
||||
|
||||
&__copy {
|
||||
margin-left: $score-product-order-detail-copy-gap;
|
||||
color: $score-product-order-detail-copy-color;
|
||||
}
|
||||
}
|
||||
|
||||
.score-product-order-detail__section {
|
||||
position: relative;
|
||||
|
||||
|
||||
&::before {
|
||||
@include arch;
|
||||
left: -15rpx;
|
||||
@include score-product-order-detail-section-notch;
|
||||
left: calc(-1 * #{$score-product-order-detail-section-notch-offset});
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
@include arch;
|
||||
right: -15rpx;
|
||||
@include score-product-order-detail-section-notch;
|
||||
right: calc(-1 * #{$score-product-order-detail-section-notch-offset});
|
||||
}
|
||||
}
|
||||
|
||||
.pay-cell {
|
||||
width: 100%;
|
||||
.score-product-order-detail__cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: $score-product-order-detail-cell-gap;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.invote-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
z-index: 11;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 10rpx;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
border-radius: 50rem !important;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -5,21 +5,21 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view>
|
||||
<view>
|
||||
<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search>
|
||||
<view class="shop-page">
|
||||
<view class="shop-page__search">
|
||||
<uv-search v-model="keywork" @custom="search(keywork)"></uv-search>
|
||||
</view>
|
||||
<view v-for="(item,index) in list" :key="index">
|
||||
<view v-for="(item,index) in list" :key="index" class="shop-page__item">
|
||||
<uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text">
|
||||
<view class="body">
|
||||
<view class="body-left">
|
||||
<view class="shop-page__body">
|
||||
<view class="shop-page__info">
|
||||
<view>距离您 {{kmUnit(item.dis)}}</view>
|
||||
<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
|
||||
<view v-else>外卖不配送</view>
|
||||
<view>{{item.addressMap + ' ' + item.address}}</view>
|
||||
<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
|
||||
</view>
|
||||
<view class="body-right">
|
||||
<view class="shop-page__actions">
|
||||
<uv-button @click="openLocation(item)">导航</uv-button>
|
||||
<uv-button @click="call(item.mobile)">致电</uv-button>
|
||||
</view>
|
||||
@@ -30,8 +30,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -39,10 +39,10 @@ import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit,prePage } from '@/utils/util'
|
||||
import {
|
||||
shopNearby,
|
||||
menuGoods
|
||||
menuGoods
|
||||
} from '@/api/goods'
|
||||
import {
|
||||
shopGetList
|
||||
shopGetList
|
||||
} from '@/api/market'
|
||||
const main = useMainStore()
|
||||
const { store,location } = storeToRefs(main)
|
||||
@@ -116,18 +116,37 @@ const choice = (shop) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.body {
|
||||
|
||||
.body-left {
|
||||
display: inline-block;
|
||||
width: 77%;
|
||||
padding-left: 6rpx;
|
||||
}
|
||||
.body-right {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
$shop-page-search-margin: $spacing-row-lg;
|
||||
$shop-page-info-padding-left: 6rpx;
|
||||
$shop-page-actions-width: 20%;
|
||||
$shop-page-actions-gap: $spacing-col-sm;
|
||||
|
||||
.shop-page {
|
||||
--shop-page-search-margin: #{$shop-page-search-margin};
|
||||
--shop-page-info-padding-left: #{$shop-page-info-padding-left};
|
||||
--shop-page-actions-width: #{$shop-page-actions-width};
|
||||
--shop-page-actions-gap: #{$shop-page-actions-gap};
|
||||
|
||||
&__search {
|
||||
margin: var(--shop-page-search-margin);
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding-left: var(--shop-page-info-padding-left);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 0 0 var(--shop-page-actions-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--shop-page-actions-gap);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,62 +19,58 @@
|
||||
<blank size="5"></blank>
|
||||
</uv-sticky>
|
||||
|
||||
<blank size="10"></blank>
|
||||
<view class="container">
|
||||
<view class="banner">
|
||||
<uv-swiper class="bg" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
|
||||
<view class="intro">
|
||||
<view class="greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
|
||||
<view class="note">java-springboot-意向点餐外卖系统</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="flex justify-between yshop-menu">
|
||||
<view class="flex flex-column align-center yshop-menu-item " @tap="takein">
|
||||
<view><image src="/static/images/index002.png" mode="aspectFit" class="img-01"></image></view>
|
||||
<view>自取</view>
|
||||
<view class="font-small text-light-black">下单免排队</view>
|
||||
</view>
|
||||
<view class="flex flex-column align-center yshop-menu-item " @tap="takeout">
|
||||
<view><image src="/static/images/index003.png" mode="aspectFit" class="img-01"></image></view>
|
||||
<view>外卖</view>
|
||||
<view class="font-small text-light-black">美食送到家</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="integral_section">
|
||||
<view class="top">
|
||||
<text class="title">我的卡券</text>
|
||||
<text class="value">{{member.couponCount}}</text>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
可抵扣商品价格哦
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode_section" @tap="coupons">
|
||||
去领个券
|
||||
<!-- <view class="iconfont iconarrow-right"></view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="integral_section" @tap="goScore">
|
||||
<view class="top">
|
||||
<text class="title">积分商城</text>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
进入积分商城兑换奈雪券及周边好礼
|
||||
<!-- <view class="iconfont iconarrow-right"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode_section" @tap="goScore">
|
||||
<image src="/static/images/jifen.png"></image>
|
||||
<text>逛一逛</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<blank size="10"></blank>
|
||||
<view class="container index-page">
|
||||
<view class="index-banner">
|
||||
<uv-swiper class="index-banner__swiper" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
|
||||
<view class="index-banner__intro">
|
||||
<view class="index-banner__greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
|
||||
<view class="index-banner__note">java-springboot-意向点餐外卖系统</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-content">
|
||||
<view class="flex justify-between index-menu">
|
||||
<view class="flex flex-column align-center index-menu__item" @tap="takein">
|
||||
<view><image src="/static/images/index002.png" mode="aspectFit" class="index-menu__icon"></image></view>
|
||||
<view>自取</view>
|
||||
<view class="font-small text-light-black">下单免排队</view>
|
||||
</view>
|
||||
<view class="flex flex-column align-center index-menu__item" @tap="takeout">
|
||||
<view><image src="/static/images/index003.png" mode="aspectFit" class="index-menu__icon"></image></view>
|
||||
<view>外卖</view>
|
||||
<view class="font-small text-light-black">美食送到家</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-card">
|
||||
<view class="index-card__main">
|
||||
<view class="index-card__header">
|
||||
<text class="index-card__title">我的卡券</text>
|
||||
<text class="index-card__value">{{member.couponCount}}</text>
|
||||
</view>
|
||||
<view class="index-card__desc">
|
||||
可抵扣商品价格哦
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-card__action" @tap="coupons">
|
||||
去领个券
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-card">
|
||||
<view class="index-card__main" @tap="goScore">
|
||||
<view class="index-card__header">
|
||||
<text class="index-card__title">积分商城</text>
|
||||
</view>
|
||||
<view class="index-card__desc">
|
||||
进入积分商城兑换奈雪券及周边好礼
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-card__action index-card__action--with-icon" @tap="goScore">
|
||||
<image src="/static/images/jifen.png" class="index-card__action-icon"></image>
|
||||
<text>逛一逛</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
@@ -83,203 +79,209 @@ import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import {
|
||||
import {
|
||||
menuAds
|
||||
} from '@/api/market'
|
||||
} from '@/api/market'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { useMainStore } from '@/store/store'
|
||||
//
|
||||
const main = useMainStore()
|
||||
const { member,store, isLogin} = storeToRefs(main)
|
||||
//const store = ref(main.store)
|
||||
const listAds = ref([])
|
||||
//const store = ref(main.store)
|
||||
const listAds = ref([])
|
||||
// const isLogin = ref(main.isLogin)
|
||||
|
||||
const handGetListAds = async () => {
|
||||
let shop_id = store.id ? store.id : 0;
|
||||
let data = await menuAds({
|
||||
shop_id: shop_id
|
||||
});
|
||||
if (data) {
|
||||
listAds.value = data.list;
|
||||
console.log('listAds:',listAds.value)
|
||||
uni.setStorage({
|
||||
key: 'isActive',
|
||||
data: data.isActive
|
||||
});
|
||||
if(data.list.length > 0){
|
||||
uni.setStorage({
|
||||
key: 'shopAd',
|
||||
data: data.list[0].image
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const takein = () => {
|
||||
main.SET_ORDER_TYPE('takein')
|
||||
uni.switchTab({
|
||||
url: '/pages/menu/menu'
|
||||
})
|
||||
}
|
||||
|
||||
const takeout = () => {
|
||||
main.SET_ORDER_TYPE('takeout')
|
||||
uni.switchTab({
|
||||
url: '/pages/menu/menu'
|
||||
})
|
||||
}
|
||||
|
||||
const coupons = () => {
|
||||
console.log("--> % orderType:\n", main.orderType)
|
||||
console.log("--> % isLogin:\n", main.isLogin)
|
||||
if(!main.isLogin) {
|
||||
uni.navigateTo({url: '/pages/components/pages/login/login'})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/coupons/coupons'
|
||||
})
|
||||
}
|
||||
|
||||
const goScore = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/list'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handGetListAds = async () => {
|
||||
let shop_id = store.id ? store.id : 0;
|
||||
let data = await menuAds({
|
||||
shop_id: shop_id
|
||||
});
|
||||
if (data) {
|
||||
listAds.value = data.list;
|
||||
console.log('listAds:',listAds.value)
|
||||
uni.setStorage({
|
||||
key: 'isActive',
|
||||
data: data.isActive
|
||||
});
|
||||
if(data.list.length > 0){
|
||||
uni.setStorage({
|
||||
key: 'shopAd',
|
||||
data: data.list[0].image
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const takein = () => {
|
||||
main.SET_ORDER_TYPE('takein')
|
||||
uni.switchTab({
|
||||
url: '/pages/menu/menu'
|
||||
})
|
||||
}
|
||||
|
||||
const takeout = () => {
|
||||
main.SET_ORDER_TYPE('takeout')
|
||||
uni.switchTab({
|
||||
url: '/pages/menu/menu'
|
||||
})
|
||||
}
|
||||
|
||||
const coupons = () => {
|
||||
console.log("--> % orderType:\n", main.orderType)
|
||||
console.log("--> % isLogin:\n", main.isLogin)
|
||||
if(!main.isLogin) {
|
||||
uni.navigateTo({url: '/pages/components/pages/login/login'})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/coupons/coupons'
|
||||
})
|
||||
}
|
||||
|
||||
const goScore = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/list'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
// main.init()
|
||||
// main.init()
|
||||
handGetListAds()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.yshop-menu {
|
||||
//margin-bottom: 10rpx;
|
||||
// position: relative;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.yshop-menu-item {
|
||||
background-color: #ffffff;
|
||||
width: 355rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.img-01 {
|
||||
width: 100px;
|
||||
height: 100rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.img-02 {
|
||||
width: 110px;
|
||||
height: 110rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
/* #endif */
|
||||
page {
|
||||
//background-color: #ffffff!important;
|
||||
}
|
||||
.banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//height: 300rpx;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.intro {
|
||||
position: absolute;
|
||||
top: calc(50rpx + var(--status-bar-height));
|
||||
left: 40rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.greet {
|
||||
font-size: $font-size-lg;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
margin: 10rpx 0;
|
||||
border-radius: 10rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: $box-shadow;
|
||||
//padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 25rpx;
|
||||
|
||||
.integral_section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
color: $text-color-base;
|
||||
font-size: $font-size-base;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-assist;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode_section {
|
||||
color: $color-primary;
|
||||
display: flex;
|
||||
//flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
// 首页局部尺寸 token（与 uni.scss 全局变量配合）
|
||||
$index-banner-height: 300rpx;
|
||||
$index-menu-item-width: 355rpx;
|
||||
$index-card-radius: 10rpx;
|
||||
$index-content-padding-x: 15rpx;
|
||||
$index-intro-offset-x: 40rpx;
|
||||
$index-intro-offset-y: 50rpx;
|
||||
$index-value-font-size: 44rpx;
|
||||
$index-gap-sm: 10rpx;
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.index-page {
|
||||
--index-banner-height: #{$index-banner-height};
|
||||
--index-menu-item-width: #{$index-menu-item-width};
|
||||
|
||||
.index-banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&__swiper {
|
||||
width: 100%;
|
||||
height: var(--index-banner-height);
|
||||
}
|
||||
|
||||
&__intro {
|
||||
position: absolute;
|
||||
top: calc(#{$index-intro-offset-y} + var(--status-bar-height));
|
||||
left: $index-intro-offset-x;
|
||||
color: $text-color-white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__greet {
|
||||
font-size: $font-size-lg;
|
||||
margin-bottom: $index-gap-sm;
|
||||
}
|
||||
|
||||
&__note {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.index-content {
|
||||
padding: 0 $index-content-padding-x;
|
||||
}
|
||||
|
||||
.index-menu {
|
||||
margin-top: $spacing-row-base;
|
||||
|
||||
&__item {
|
||||
width: var(--index-menu-item-width);
|
||||
padding-bottom: $spacing-row-lg;
|
||||
background-color: $text-color-white;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-top: $spacing-row-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.index-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: $index-gap-sm 0;
|
||||
padding: 25rpx;
|
||||
border-radius: $index-card-radius;
|
||||
background-color: $text-color-white;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-right: $index-gap-sm;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: $index-value-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-color-assist;
|
||||
}
|
||||
|
||||
&__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $font-size-sm;
|
||||
color: $color-primary;
|
||||
|
||||
&--with-icon {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__action-icon {
|
||||
width: $img-size-sm;
|
||||
height: $img-size-sm;
|
||||
margin-bottom: $index-gap-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view style="padding: 0 30rpx;">
|
||||
<view class="container mine-page">
|
||||
<view class="mine-page__user-section">
|
||||
<!-- user box begin -->
|
||||
<view class="d-flex flex-column bg-white user-box">
|
||||
<view class="mine-user d-flex flex-column bg-white">
|
||||
|
||||
<view class="d-flex align-items-center">
|
||||
<view class="avatar rounded-circle">
|
||||
<view class="mine-user__header d-flex align-items-center">
|
||||
<view class="mine-user__avatar rounded-circle">
|
||||
<image :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'"></image>
|
||||
</view>
|
||||
<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
|
||||
<view class="mine-user__info d-flex flex-column flex-fill overflow-hidden">
|
||||
<view v-if="isLogin"
|
||||
class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
|
||||
@tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
|
||||
@@ -26,26 +26,26 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- user grid begin -->
|
||||
<view class="w-100 d-flex align-items-center just-content-center">
|
||||
<view class="user-grid" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
|
||||
<view class="mine-user__stats w-100 d-flex align-items-center just-content-center">
|
||||
<view class="mine-user__stat" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
|
||||
<view class="value font-size-extra-lg font-weight-bold text-color-base">
|
||||
{{ isLogin ? member.couponCount : 0}}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">优惠券</view>
|
||||
</view>
|
||||
<view class="user-grid" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
|
||||
<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
|
||||
<view class="value font-size-extra-lg font-weight-bold text-color-base">
|
||||
{{ isLogin ? member.integral : 0 }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">积分</view>
|
||||
</view>
|
||||
<view class="user-grid">
|
||||
<view class="mine-user__stat">
|
||||
<view class="value font-size-extra-lg font-weight-bold text-color-base">
|
||||
{{ isLogin ? member.nowMoney : 0 }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">余额</view>
|
||||
</view>
|
||||
<view class="user-grid" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
|
||||
<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
|
||||
<view class="value font-size-extra-lg font-weight-bold text-color-base">
|
||||
{{ isLogin ? member.sumMoney : 0 }}
|
||||
</view>
|
||||
@@ -58,24 +58,24 @@
|
||||
|
||||
</view>
|
||||
<!-- service box begin -->
|
||||
<view class="service-box">
|
||||
<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
|
||||
<view class="mine-service">
|
||||
<view class="mine-service__title font-size-lg text-color-base font-weight-bold">我的服务</view>
|
||||
<view class="u-m-t-20">
|
||||
<uv-cell-group>
|
||||
<block v-for="(item, index) in services" :key='index'>
|
||||
<uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true">
|
||||
<template #icon>
|
||||
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
|
||||
<image :src="item.image" class="mine-service__icon mr-1"></image>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)">
|
||||
<template #icon>
|
||||
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
|
||||
<image :src="item.image" class="mine-service__icon mr-1"></image>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)">
|
||||
<template #icon>
|
||||
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image>
|
||||
<image :src="item.image" class="mine-service__icon mr-1"></image>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
@@ -83,45 +83,45 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</layout>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
ref,
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
userGetUserInfo,
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onShow} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
userGetUserInfo,
|
||||
mineService
|
||||
} from '@/api/user'
|
||||
const main = useMainStore()
|
||||
const { member,isLogin } = storeToRefs(main)
|
||||
|
||||
const title = ref('个人中心')
|
||||
const services = ref([])
|
||||
|
||||
const growthValue = computed(() => {
|
||||
if (!isLogin.value) return 0
|
||||
const {
|
||||
currentValue,
|
||||
needValue
|
||||
} = member.value
|
||||
return currentValue / (currentValue + needValue) * 100
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getServices();
|
||||
})
|
||||
onShow(() => {
|
||||
getUserInfo();
|
||||
})
|
||||
|
||||
|
||||
} from '@/api/user'
|
||||
const main = useMainStore()
|
||||
const { member,isLogin } = storeToRefs(main)
|
||||
|
||||
const title = ref('个人中心')
|
||||
const services = ref([])
|
||||
|
||||
const growthValue = computed(() => {
|
||||
if (!isLogin.value) return 0
|
||||
const {
|
||||
currentValue,
|
||||
needValue
|
||||
} = member.value
|
||||
return currentValue / (currentValue + needValue) * 100
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
getServices();
|
||||
})
|
||||
onShow(() => {
|
||||
getUserInfo();
|
||||
})
|
||||
|
||||
|
||||
const getUserInfo = async() => {
|
||||
if (isLogin.value) {
|
||||
let data = await userGetUserInfo();
|
||||
@@ -182,121 +182,111 @@ const serv = (item) => {
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
// 个人中心页局部 token（与 uni.scss 全局变量配合）
|
||||
$mine-section-padding-x: $spacing-row-lg;
|
||||
$mine-user-box-radius: $border-radius-lg;
|
||||
$mine-user-box-margin-top: 70rpx;
|
||||
$mine-user-box-margin-bottom: $spacing-row-lg;
|
||||
$mine-avatar-size: 160rpx;
|
||||
$mine-avatar-image-size: 140rpx;
|
||||
$mine-avatar-offset-top: -35rpx;
|
||||
$mine-avatar-margin-x: 35rpx;
|
||||
$mine-avatar-radius: 20rpx;
|
||||
$mine-avatar-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
|
||||
$mine-stat-width: 25%;
|
||||
$mine-stat-padding: $spacing-row-lg;
|
||||
$mine-stat-value-gap: $spacing-row-base;
|
||||
$mine-info-margin-top: $spacing-row-base;
|
||||
$mine-service-padding-y: 32rpx;
|
||||
$mine-service-padding-bottom: 10rpx;
|
||||
$mine-service-icon-size: $img-size-sm;
|
||||
$mine-service-title-gap: $spacing-row-base;
|
||||
|
||||
/* #ifdef H5 */
|
||||
page {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.mine-page {
|
||||
--mine-avatar-size: #{$mine-avatar-size};
|
||||
--mine-avatar-image-size: #{$mine-avatar-image-size};
|
||||
--mine-service-icon-size: #{$mine-service-icon-size};
|
||||
|
||||
&__user-section {
|
||||
padding: 0 $mine-section-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.mine-user {
|
||||
position: relative;
|
||||
margin-top: $mine-user-box-margin-top;
|
||||
margin-bottom: $mine-user-box-margin-bottom;
|
||||
border-radius: $mine-user-box-radius;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&__info {
|
||||
margin-top: $mine-info-margin-top;
|
||||
}
|
||||
|
||||
|
||||
.user-box {
|
||||
&__avatar {
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-top: 70rpx;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
margin-top: -35rpx;
|
||||
margin-left: 35rpx;
|
||||
margin-right: 35rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
|
||||
flex-shrink: 0;
|
||||
width: var(--mine-avatar-size);
|
||||
height: var(--mine-avatar-size);
|
||||
margin-top: $mine-avatar-offset-top;
|
||||
margin-left: $mine-avatar-margin-x;
|
||||
margin-right: $mine-avatar-margin-x;
|
||||
border-radius: $mine-avatar-radius;
|
||||
background-color: $text-color-white;
|
||||
box-shadow: $mine-avatar-shadow;
|
||||
|
||||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: -10rpx;
|
||||
bottom: -10rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 50rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $color-warning;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
width: var(--mine-avatar-image-size);
|
||||
height: var(--mine-avatar-image-size);
|
||||
border-radius: $border-radius-circle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-grid {
|
||||
width: 25%;
|
||||
padding: 30rpx;
|
||||
&__stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $mine-stat-width;
|
||||
padding: $mine-stat-padding;
|
||||
|
||||
.value {
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: $mine-stat-value-gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mine-service {
|
||||
width: 100%;
|
||||
padding: $mine-service-padding-y $mine-section-padding-x $mine-service-padding-bottom;
|
||||
background-color: $text-color-white;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.service-box {
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
padding: 32rpx 30rpx 10rpx;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $text-color-assist;
|
||||
font-size: $font-size-sm;
|
||||
padding-bottom: -40rpx;
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
width: 25%;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
&__title {
|
||||
margin-bottom: $mine-service-title-gap;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: var(--mine-service-icon-size);
|
||||
height: var(--mine-service-icon-size);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,16 +5,16 @@
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<view class="container">
|
||||
<view class="container order-page">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
</view>
|
||||
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
|
||||
<view class="order-page__list d-flex flex-column w-100">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index">
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="flex-fill d-flex flex-column">
|
||||
<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="font-size-lg text-color-base order-item__shop">
|
||||
{{ item.shop.name }}
|
||||
</view>
|
||||
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
|
||||
@@ -27,9 +27,9 @@
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="image"></image>
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
|
||||
<view class="flex order-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
|
||||
<image :src="good.image" mode="aspectFill" class="order-item__thumb"></image>
|
||||
<view class="flex flex-column">
|
||||
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
|
||||
<view class="font-size-sm mt-1">{{ good.spec }}</view>
|
||||
@@ -37,20 +37,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
|
||||
<view class="d-flex justify-content-between align-items-center order-item__meta">
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{formatDateTime(item.createTime) }}
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-base align-items-center">
|
||||
<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="order-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
|
||||
<view class="font-size-lg">￥{{ item.payPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end">
|
||||
<view>
|
||||
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
|
||||
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end order-item__actions">
|
||||
<button
|
||||
v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
|
||||
class="order-item__btn"
|
||||
plain
|
||||
size="mini"
|
||||
@tap.stop="receive(item)"
|
||||
>确认收到餐</button>
|
||||
<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
@@ -62,9 +66,9 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
import {
|
||||
ref,
|
||||
computed
|
||||
computed
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
@@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
orderGetOrders,
|
||||
orderReceive
|
||||
orderReceive
|
||||
} from '@/api/order'
|
||||
const main = useMainStore()
|
||||
const { isLogin } = storeToRefs(main)
|
||||
@@ -163,13 +167,54 @@ const receive = async(order) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-margin {
|
||||
margin-left: 10rpx;
|
||||
// 订单页局部 token（与 uni.scss 全局变量配合）
|
||||
$order-list-padding-x: $spacing-row-base;
|
||||
$order-list-padding-bottom: 0;
|
||||
$order-item-gap: $spacing-row-lg;
|
||||
$order-section-gap: $spacing-row-base;
|
||||
$order-btn-gap: $spacing-row-base;
|
||||
$order-summary-gap: $spacing-row-base;
|
||||
$order-thumb-size: 160rpx;
|
||||
$order-thumb-radius: 8rpx;
|
||||
|
||||
.order-page {
|
||||
--order-thumb-size: #{$order-thumb-size};
|
||||
|
||||
&__list {
|
||||
padding: $order-list-padding-x;
|
||||
padding-bottom: $order-list-padding-bottom;
|
||||
}
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
margin-bottom: $order-item-gap;
|
||||
|
||||
&__shop {
|
||||
margin-bottom: $order-section-gap;
|
||||
}
|
||||
|
||||
&__goods {
|
||||
margin-bottom: $order-section-gap;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
flex-shrink: 0;
|
||||
width: var(--order-thumb-size);
|
||||
height: var(--order-thumb-size);
|
||||
margin-right: $spacing-row-lg;
|
||||
border-radius: $order-thumb-radius;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
margin-bottom: $order-item-gap;
|
||||
}
|
||||
|
||||
&__summary {
|
||||
margin-right: $order-summary-gap;
|
||||
}
|
||||
|
||||
&__btn + &__btn {
|
||||
margin-left: $order-btn-gap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user