Commit 975834e0 authored by chenwei's avatar chenwei

Merge branch 'feature' into 'dev'

Feature

See merge request !1
parents 288dedd9 171b507f
.header-toper{
width: 100%;
height: 80upx;
background-image: url(../../static/img/top.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 80upx;
position: fixed;
left: 0;
top: 0;
z-index: 99;
background-color: var(--bColor);
.header-toper {
width: 100%;
height: 80upx;
background-image: url(../../static/img/top.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-top: 80upx;
position: fixed;
left: 0;
top: 0;
z-index: 99;
background-color: var(--bColor);
}
.header-toper-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--f32);
color: var(--c0);
font-weight: 700;
.header-toper-title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--f32);
color: var(--c0);
font-weight: 700;
}
.header-toper-title image {
width: 48upx;
height: 44upx;
position: absolute;
left: 40upx;
}
.header-toper-title image{
width: 48upx;
height: 44upx;
position: absolute;
left: 40upx;
}
\ No newline at end of file
<template>
<view class="">
<view class="header-toper">
<!-- <view class="start-bar"></view> -->
<view class="header-toper-title">
<image src="../../static/img/back.png" mode="" @click="$request.backGo"></image>
<text>{{title}}</text>
</view>
</view>
</view>
<view class="">
<view class="header-toper">
<!-- <view class="start-bar"></view> -->
<view class="header-toper-title">
<image
v-if="leftIcon"
src="../../static/img/back.png"
mode=""
@click="$request.backGo"
></image>
<text>{{ title }}</text>
<image
v-if="rightBtn"
src="../../static/img/add.png"
mode=""
@click="$emit('rightBtnClick')"
></image>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
title: String,
},
data() {
return {
}
},
methods: {
}
}
export default {
props: {
title: String,
rightBtn: {
type: Boolean,
default: false
},
leftIcon: {
type: Boolean,
default: true
}
},
data() {
return {}
},
methods: {}
}
</script>
<style>
/* @import url(./index.css); */
</style>
\ No newline at end of file
/* 页面css在static css main.css里面 */
/* @import url(./index.css); */
</style>
This diff is collapsed.
<template>
<view class="activity_detail">
<dHeader :title="detail.activity"></dHeader>
<view class="container">
<view class="img-box">
<image
class="img"
:src="locale === 'zh' ? detailInfo.coverImageZh : detailInfo.coverImageEn"
></image>
</view>
<view class="container-main">
<view class="activity-title">{{
locale === 'zh' ? detailInfo.titleZh : detailInfo.titleEn
}}</view>
<view class="activity-remark" v-if="detailInfo.extraRecommend">
{{
locale === 'zh'
? detailInfo.extraRecommend.shareContentZh
: detailInfo.extraRecommend.shareContentEn
}}
</view>
<view class="activity-cell">
<view class="cell-label">{{ detail.illustrate }}</view>
<view class="cell-content">
<image class="cell-image" src="../../static/img/score_b.png"></image>
<view class="cell-text">{{ detailInfo.getScoreOnce }}</view>
</view>
</view>
<view class="activity-cell">
<view class="cell-label">{{ detail.maxIntegral }}</view>
<view class="cell-content">
<image class="cell-image" src="../../static/img/score_b.png"></image>
<view class="cell-text">{{ detailInfo.maxScoreTotal }}</view>
</view>
</view>
<view class="activity-cell">
<view class="cell-label">{{ detail.date }}</view>
<view class="cell-content">
{{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
</view>
</view>
<view class="activity-cell">
<view class="cell-label">{{ detail.rulesIllustrate }}</view>
<view class="cell-content">
{{ locale === 'zh' ? detailInfo.descZh : detailInfo.descEn }}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
id: null,
detailInfo: {}
}
},
onLoad(route) {
console.log(route)
this.id = route.id
this.getDetail()
},
computed: {
locale() {
return this.$lang.locale
},
detail() {
return this.$lang.lang.detail
}
},
methods: {
// 获取详情
getDetail() {
this.$request
.post('/app-api/member/score-rule/get', { id: this.id })
.then(({ code, data }) => {
if (code === 0 && data) {
this.detailInfo = data
}
})
},
// 时间范围返回
getTimeRange(start, end) {
const formatDate = (timestamp) => {
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`
}
return `${formatDate(start)}${formatDate(end)}`
}
}
}
</script>
<style lang="scss">
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
background-color: #d4e5fe;
}
.container {
padding: 20upx;
background-color: #fff;
border-radius: 20upx;
}
.img-box {
width: 100%;
height: 400upx;
display: flex;
justify-content: center;
align-items: center;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.container-main {
padding: 12upx;
}
.activity-title {
font-size: 28upx;
height: 84upx;
display: flex;
align-items: center;
color: var(--c2);
}
.activity-remark {
font-size: 24upx;
color: #7f7f7f;
}
.activity-cell {
margin-top: 20upx;
width: 100%;
display: flex;
justify-content: space-between;
}
.cell-label {
font-size: 24upx;
color: #7f7f7f;
}
.cell-content {
max-width: 60%;
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 24upx;
color: #7f7f7f;
}
.cell-image {
width: 24upx;
height: 24upx;
}
.cell-text {
margin-left: 6upx;
font-weight: 600;
font-size: 26upx;
color: #000;
}
</style>
<template>
<view>
<dHeader
:title="$lang.lang.addressInfo.info"
:right-btn="true"
@rightBtnClick="toAddressAdd"
></dHeader>
<view class="container">
<view class="address-list">
<view class="address-item" v-for="item in addressList" :key="item.id">
<view class="item-header">
<view class="item-name">{{ item.name }}</view>
<view class="item-phone">+{{ item.areaCode }}&ensp;{{ item.phone }}</view>
</view>
<view class="item-content">
{{ item.address }}
</view>
<view class="item-footer">
<view
class="item-default"
@click="bindCheck($event, item)"
:class="{ 'item-default-active': check == item }"
>
<label class="radio"
><radio
class="radio"
color="#ff4d4f"
:checked="check == item.id"
:value="item.name"
/>设为默认地址</label
>
</view>
<view class="item-footer-right">
<view class="right-box" @click="toEditAddress(item.id)">
<image class="item-img" src="../../static/img/edit.png"></image>
编辑</view
>
<view class="right-box" @click="deleteAddress(item.id)">
<image class="item-img" src="../../static/img/delete_pail.png"></image>
删除</view
>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
check: null,
addressList: []
}
},
onShow() {
this.getAddressList()
},
methods: {
toAddressAdd() {
uni.navigateTo({
url: '/pages/address_add/address_add'
})
},
toEditAddress(id) {
uni.navigateTo({
url: '/pages/address_edit/address_edit?id=' + id
})
},
// 切换默认地址
async bindCheck(e, item) {
this.check = item.id
try {
await this.$request.post('/app-api/member/user-address/update', {
...item,
isDefault: 0
})
} catch (err) {}
},
// 获取地址列表
async getAddressList() {
try {
const id = this.$store.getters.id
const { code, data } = await this.$request.get('/app-api/member/user-address/member/list', {
id
})
if (code == 0 && data) {
// console.log(data)
this.addressList = data
const i = this.addressList.findIndex((item) => item.isDefault === 0)
if (i >= 0) this.check = this.addressList[i].id
}
} catch (err) {}
},
// 删除地址
async deleteAddress(id) {
const that = this
uni.showModal({
title: that.$lang.lang.notices.notice,
content: that.$lang.lang.notices.delAddress,
success: async (res) => {
if (res.confirm) {
try {
const { code } = await that.$request.post(
`/app-api/member/user-address/delete?id=${id}`
)
if (code == 0) {
that.getAddressList()
}
} catch (err) {}
}
}
})
}
}
}
</script>
<style>
@import url(../../static/css/address.css);
</style>
<template>
<view>
<dHeader :title="$lang.lang.addressInfo.addInfo"></dHeader>
<view class="container">
<uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model="form.name"
:placeholder="$lang.lang.notices.consignee"
/>
</uni-forms-item>
<uni-forms-item :label="$lang.lang.addressInfo.phone" required name="phone">
<view class="phone-box">
<picker :value="areaIndex" :range="areaName" @change="areaChange">
<view class="phone-code">
+{{ areaCode }}
<uni-icons type="down" class="code-icon" size="10"></uni-icons>
</view>
</picker>
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model.trim="form.phone"
:placeholder="$lang.lang.notices.phone"
/>
</view>
</uni-forms-item>
<uni-forms-item
class="item"
:label="$lang.lang.addressInfo.fullAddress"
required
name="address"
>
<view class="textarea-box">
<uni-easyinput
class="input"
type="textarea"
:trim="true"
autoHeight
:inputBorder="false"
:maxlength="100"
v-model.trim="form.address"
:placeholder="$lang.lang.notices.fullAddress"
>
</uni-easyinput>
<view class="placeholder">{{ $lang.lang.notices.fullAddressLength }}</view>
</view>
</uni-forms-item>
<view class="btn" @click="saveAddress">报存地址</view>
</uni-forms>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
form: {
name: '',
phone: '',
address: ''
},
areaCode: this.$store.getters.areaCode,
areaIndex: 0,
areaName: []
}
},
computed: {
rules() {
return {
name: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
},
phone: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.phone },
{
validateFunction: (rule, value) => /^\d+$/.test(value),
errorMessage: this.$lang.lang.notices.nophone
}
]
},
address: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.fullAddress },
{ maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
]
}
}
}
},
created() {
this.getCountry()
},
methods: {
saveAddress() {
this.$refs.form.validate().then(async (valid) => {
if (valid) {
try {
const params = {
...this.form,
areaCode: this.areaCode,
memberId: this.$store.getters.id
}
const { code, data } = await this.$request.post(
'/app-api/member/user-address/create',
params
)
if (code == 0) {
this.$router.back()
}
} catch (error) {}
}
})
},
// 获取国家区号
async getCountry() {
try {
const { code, data } = await this.$request.get('/app-api/ecw/country/list-all')
if (code == 0 && data.length > 0) {
// 查询用户区号下标
const i = data.findIndex((item) => {
return item.tel == this.areaCode
})
if (i >= 0) this.areaIndex = i
data.forEach((item) => {
const str = item.tel + ' ' + item.nameZh
if (this.$lang.locale == 'zh') {
this.areaName.push(str)
} else {
this.areaName.push(str)
}
})
}
} catch (error) {}
},
// 区号选择切换
areaChange(e) {
this.areaIndex = e.detail.value
this.areaCode = this.areaName[this.areaIndex].split(' ')[0]
}
}
}
</script>
<style>
page {
padding-top: 190upx;
}
.uni-forms {
padding: 0 48upx;
box-sizing: border-box;
}
.uni-forms-item {
padding: 0 24upx;
margin-bottom: 44upx;
width: 100%;
align-items: center;
min-height: 80upx;
box-sizing: border-box;
border-radius: 12upx;
background-color: #fff;
}
.item {
align-items: start;
}
.input {
font-size: 24upx;
}
.textarea-box {
padding: 0 0 30upx;
}
.placeholder {
position: absolute;
bottom: 8upx;
right: 0;
font-size: 24upx;
color: #b3b3b3;
}
.phone-box {
display: flex;
align-items: center;
}
.phone-code {
display: flex;
align-items: center;
margin-right: 10upx;
padding-right: 10upx;
border-right: 1px solid #e6e6e6;
font-size: 24upx;
color: #000;
}
.code-icon {
margin-left: 6upx;
}
.btn {
width: 100%;
height: 80upx;
line-height: 80upx;
text-align: center;
background-color: #3d6ef6;
color: #fff;
border-radius: 80upx;
margin-top: 40upx;
}
::v-deep .uni-forms-item__label {
font-size: 28upx !important;
font-weight: 500 !important;
color: #000;
}
::v-deep .uni-easyinput__content-input {
padding-left: 0 !important;
}
::v-deep .uni-easyinput__content-textarea {
height: 100upx;
min-height: 100upx;
/* #ifndef APP-NVUE */
min-height: 100upx;
width: auto;
/* #endif */
}
</style>
<template>
<view>
<dHeader :title="$lang.lang.addressInfo.editInfo"></dHeader>
<view class="container">
<uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
<uni-forms-item :label="$lang.lang.addressInfo.consignee" required name="name">
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model="form.name"
:placeholder="$lang.lang.notices.consignee"
/>
</uni-forms-item>
<uni-forms-item :label="$lang.lang.addressInfo.phone" required name="phone">
<view class="phone-box">
<view class="phone-code">+86</view>
<uni-easyinput
class="input"
:trim="true"
:inputBorder="false"
v-model.trim="form.phone"
:placeholder="$lang.lang.notices.phone"
/>
</view>
</uni-forms-item>
<uni-forms-item
class="item"
:label="$lang.lang.addressInfo.fullAddress"
required
name="address"
>
<view class="textarea-box">
<uni-easyinput
class="input"
type="textarea"
:trim="true"
autoHeight
:inputBorder="false"
:maxlength="100"
v-model.trim="form.address"
:placeholder="$lang.lang.notices.fullAddress"
>
</uni-easyinput>
<view class="placeholder">{{ $lang.lang.notices.fullAddressLength }}</view>
</view>
</uni-forms-item>
<view class="btn" @click="saveAddress">报存地址</view>
</uni-forms>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
form: {
name: '',
phone: '',
address: ''
}
}
},
onLoad(route) {
this.getAddress(route.id)
},
computed: {
rules() {
return {
name: {
rules: [{ required: true, errorMessage: this.$lang.lang.notices.consignee }]
},
phone: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.phone },
{
validateFunction: (rule, value) => /^\d+$/.test(value),
errorMessage: this.$lang.lang.notices.nophone
}
]
},
address: {
rules: [
{ required: true, errorMessage: this.$lang.lang.notices.fullAddress },
{ maxLength: 100, errorMessage: this.$lang.lang.notices.fullAddressLength }
]
}
}
}
},
methods: {
saveAddress() {
// console.log(this.form)
this.$refs.form.validate().then(async (res) => {
if (res) {
try {
const { code } = await this.$request.post(
'/app-api/member/user-address/update',
this.form
)
if (code == 0) {
this.$router.back()
}
} catch (err) {}
}
})
},
// 获取地址信息 回显
async getAddress(id) {
try {
const { code, data } = await this.$request.get('/app-api/member/user-address/get', { id })
if (code == 0 && data) {
this.form = data
}
} catch (err) {}
}
}
}
</script>
<style>
page {
padding-top: 190upx;
}
.uni-forms {
padding: 0 48upx;
box-sizing: border-box;
}
.uni-forms-item {
padding: 0 24upx;
margin-bottom: 44upx;
width: 100%;
align-items: center;
min-height: 80upx;
box-sizing: border-box;
border-radius: 12upx;
background-color: #fff;
}
.item {
align-items: start;
}
.input {
font-size: 24upx;
}
.textarea-box {
padding: 0 0 30upx;
}
.placeholder {
position: absolute;
bottom: 8upx;
right: 0;
font-size: 24upx;
color: #b3b3b3;
}
.phone-box {
display: flex;
align-items: center;
}
.phone-code {
margin-right: 10upx;
padding-right: 10upx;
border-right: 1px solid #e6e6e6;
font-size: 24upx;
color: #000;
}
.btn {
width: 100%;
height: 80upx;
line-height: 80upx;
text-align: center;
background-color: #3d6ef6;
color: #fff;
border-radius: 80upx;
margin-top: 40upx;
}
::v-deep .uni-forms-item__label {
font-size: 28upx !important;
font-weight: 500 !important;
color: #000;
}
::v-deep .uni-easyinput__content-input {
padding-left: 0 !important;
}
::v-deep .uni-easyinput__content-textarea {
height: 100upx;
min-height: 100upx;
/* #ifndef APP-NVUE */
min-height: 100upx;
width: auto;
/* #endif */
}
</style>
<template>
<view class="exchange_detail">
<dHeader :title="detail.exchangeTitle"></dHeader>
<div class="container">
<div class="header">
<div class="header-image">
<image class="img" src="../../static/img/exchange.png"></image>
</div>
<div class="header-content">
<div class="header-content-title">
{{ locale === 'zh' ? detailInfo.statusZh : detailInfo.statusEn }}
</div>
<div class="header-content-text">
<view class="header-content-small">{{ detail.total }}</view
>{{ detailInfo.totalCount }}{{ detail.integral }}
</div>
</div>
</div>
<div class="nav">
<div class="nav-image">
<image class="img" :src="locale === 'zh' ? detailInfo.imgZh : detailInfo.imgEn"></image>
</div>
<div class="nav-content">
<div class="nav-content-text">
{{ locale === 'zh' ? detailInfo.rewardTitleZh : detailInfo.rewardTitleEn }}
</div>
<div class="nav-content-tag">
<div class="tag-image">
<image class="img" src="../../static/img/score_b.png"></image
>{{ detailInfo.oncePointsRequire }}
</div>
<view class="tag-text">
{{ detail.num(detailInfo.rewardCount) }}
</view>
</div>
</div>
</div>
<div class="main">
<div class="main-cell">
<div class="cell-label">{{ detail.activityTime }}</div>
<div class="cell-content">
{{ getTimeRange(detailInfo.startTime, detailInfo.endTime) }}
</div>
</div>
<div class="main-cell">
<div class="cell-label">{{ detail.exchangeOutlets }}</div>
<div class="cell-content">
{{ locale === 'zh' ? detailInfo.nodeTitleZh : detailInfo.nodeTitleEn }}
</div>
</div>
<div class="main-cell">
<div class="cell-label">{{ detail.exchangeType }}</div>
<div class="cell-content">
{{ locale === 'zh' ? detailInfo.redeemTypeZh : detailInfo.redeemTypeEn }}
</div>
</div>
<template v-if="detailInfo.redeemType != 1">
<div class="main-cell">
<div class="cell-label">{{ detail.address }}</div>
<div class="cell-content">
{{ detailInfo.recipientName }}&ensp;+{{ detailInfo.recipientPhoneNum }},
{{ detailInfo.recipientAddress }}
<view class="red">{{ detail.errorMsg }}</view>
</div>
</div>
<div class="main-cell">
<div class="cell-label">{{ detail.courierNum }}</div>
<div class="cell-content">{{ detailInfo.expressNo }}</div>
</div>
<div class="main-cell">
<div class="cell-label">{{ detail.courierCompany }}</div>
<div class="cell-content">{{ detailInfo.courierCompanyName }}</div>
</div>
<div class="main-cell">
<div class="cell-label">{{ detail.courierTime }}</div>
<div class="cell-content">{{ formatDate(detailInfo.expressDate) }}</div>
</div>
</template>
<div class="main-cell">
<div class="cell-label">{{ detail.remark }}</div>
<div class="cell-content">{{ detailInfo.remark }}</div>
</div>
</div>
</div>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
id: null,
detailInfo: {}
}
},
onLoad(route) {
console.log(route)
this.id = route.id
this.getDetail()
},
computed: {
locale() {
return this.$lang.locale
},
detail() {
return this.$lang.lang.detail
}
},
methods: {
// 获取详情
getDetail() {
this.$request
.post('/app-api/reward/redeem/record/detail', {
redeemId: this.id
})
.then(({ code, data }) => {
if (code == 0 && data) {
this.detailInfo = data
}
})
.catch((error) => {
console.log(error)
})
},
// 时间范围返回
getTimeRange(start, end) {
return `${this.formatDate(start)}${this.formatDate(end)}`
},
// 时间戳转换为YYYY-MM-DD HH:mm:ss
formatDate(timestamp) {
if (!timestamp) return ''
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`
}
}
}
</script>
<style lang="scss">
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
box-sizing: border-box;
height: 100%;
background: linear-gradient(#317beb, #d3e5fe);
}
.exchange_detail {
padding: 50upx 40upx;
height: inherit;
box-sizing: border-box;
background-color: #fff;
border-top-right-radius: 20upx;
border-top-left-radius: 20upx;
background: linear-gradient(#fff, #d3e5fe);
}
.header {
display: flex;
box-sizing: border-box;
.header-image {
width: 90upx;
height: 90upx;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.header-content {
margin-left: 20upx;
display: flex;
height: inherit;
flex-direction: column;
justify-content: space-between;
.header-content-title {
font-size: 26upx;
color: #333;
}
.header-content-text {
display: flex;
align-items: end;
font-size: 24upx;
color: #666;
.header-content-small {
margin-right: 10upx;
font-size: 20upx;
color: #999;
}
}
}
}
.nav {
margin-top: 60upx;
width: 100%;
display: flex;
.nav-image {
width: 140upx;
height: 140upx;
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.nav-content {
flex: 1;
margin-left: 20upx;
display: flex;
height: inherit;
flex-direction: column;
.nav-content-text {
width: 70%;
font-size: 24upx;
color: var(--cb7b);
}
.nav-content-tag {
margin-top: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.tag-image {
display: flex;
align-items: center;
.img {
width: 32upx;
height: 32upx;
object-fit: cover;
}
}
.tag-text {
font-size: 24upx;
color: #666;
}
}
}
}
.main {
margin-top: 60upx;
width: 100%;
display: flex;
flex-direction: column;
.main-cell {
margin-top: 20upx;
width: 100%;
display: flex;
align-items: start;
justify-content: space-between;
.cell-label {
width: 30%;
font-size: 24upx;
color: #333;
}
.cell-content {
text-align: right;
width: 70%;
font-size: 24upx;
color: var(--cb7b);
.red {
color: red;
font-size: 16upx;
}
}
}
}
</style>
This diff is collapsed.
<template>
<view class="gift">
<view class="gift-remark">{{ $lang.lang.integral.pointsRemark }}</view>
<view class="gift-select">
<view class="select-list">
<view class="list-item" v-for="(item, index) in netList" :key="index"
>{{ item }}
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</view>
</view>
<view class="select-right">
<picker
mode="multiSelector"
:range="pickerData"
:value="pickerValue"
:range-key="locale === 'zh' ? 'labelZh' : 'labelEn'"
@change="bindPickerChange"
@columnchange="bindColumnChange"
>
{{ $lang.lang.integral.outlets }}
<uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
</picker>
</view>
</view>
<view class="gift-content">
<view class="gift-item" v-for="item in giftList" :key="item.id" @click="toMail(item.id)">
<view class="gift-image-box">
<image
class="gift-image"
mode="cover"
:src="locale == 'zh' ? item.imgZh : item.imgEn"
></image>
<view class="gift-tag">
<view class="tags">
<image class="tag-image" src="../../../static/img/score.png"></image>
<view class="tag-text">{{ item.pointsRequire }}</view>
</view>
</view>
<view class="foot-tag">{{ $lang.lang.integral.remainder(item.quantityRemain) }}</view>
</view>
<view class="gift-name">{{ locale === 'zh' ? item.titleZh : item.titleEn }}</view>
<view class="gift-menu">
<view class="gift-menu-text" v-for="ele in item.pickMethodList" :key="ele.id">{{
locale === 'zh' ? ele.labelZh : ele.labelEn
}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
userInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
giftList: [],
data: [],
pickerData: [[], [], []],
pickerValue: [0, 0, 0],
nodeId: null,
netList: []
}
},
computed: {
locale() {
return this.$lang.locale
}
},
watch: {
userInfo: {
handler(val) {
console.log(val)
this.netList =
this.$lang.locale === 'zh'
? [val.countryTitleZh, val.cityTitleZh]
: [val.countryTitleEn, val.cityTitleEn]
},
immediate: true
}
},
created() {
this.getGift()
this.getNet()
},
methods: {
toMail(id) {
uni.navigateTo({
url: '/pages/order_mail/order_mail?id=' + id
})
},
// 获取礼品列表
async getGift() {
try {
const memberId = this.$store.getters.id
const { code, data } = await this.$request.post('/app-api/ecw/reward/list', {
memberId,
nodeId: this.nodeId
})
if (code === 0) {
this.giftList = data
}
} catch (error) {
console.log(error)
}
},
// 获取网点列表
async getNet() {
try {
const { code, data } = await this.$request.get('/admin-api/ecw/node/get-node-tree-region')
if (code === 0) {
this.data = data
this.initPickerData()
}
} catch (error) {
console.log(error)
}
},
// 初始化选择器数据
initPickerData() {
if (this.data.length === 0) return
const countries = this.data
const cities = this.data[0].children || []
const areas = (this.data[0].children && this.data[0].children[0].children) || []
this.pickerData[0] = countries
this.pickerData[1] = cities
this.pickerData[2] = areas
},
// 选择改变
bindPickerChange(e) {
const val = e.detail.value
this.pickerValue = val
this.nodeId = this.pickerData[2][val[2]].id
this.getGift()
this.getPickerValue(val)
},
// 列改变
bindColumnChange(e) {
const { column, value } = e.detail
const data = {
pickerData: this.pickerData,
pickerValue: this.pickerValue
}
data.pickerValue[column] = value
if (column === 0) {
const selectedCountry = this.data[value]
const cities = selectedCountry.children || []
const areas = (cities[0] && cities[0].children) || []
data.pickerData[1] = cities
data.pickerData[2] = areas
data.pickerValue[1] = 0
data.pickerValue[2] = 0
} else if (column === 1) {
const selectedCountry = this.data[data.pickerValue[0]]
const selectedCity = selectedCountry.children[value]
const areas = selectedCity.children || []
data.pickerData[2] = areas
data.pickerValue[2] = 0
}
this.pickerData = data.pickerData
this.pickerValue = data.pickerValue
},
// 选择数据显示
getPickerValue(val) {
const countries = this.pickerData[0][val[0]]
const cities = this.pickerData[1][val[1]]
const areas = this.pickerData[2][val[2]]
this.netList =
this.locale === 'zh'
? [countries.labelZh, cities.labelZh, areas.labelZh]
: [countries.labelEn, cities.labelEn, areas.labelEn]
}
}
}
</script>
<style lang="scss" scoped>
.gift {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.gift-remark {
padding: 0 32upx;
width: 100%;
height: 42upx;
display: flex;
align-items: center;
justify-content: right;
box-sizing: border-box;
font-size: 20upx;
color: red;
}
.gift-select {
padding: 0 32upx;
display: flex;
width: 100%;
height: 70upx;
color: #b3b3b3;
box-sizing: border-box;
align-items: center;
border-bottom: 2upx solid #e7e7e7;
}
.select-list {
font-size: 20upx;
display: flex;
align-items: center;
}
.list-item {
display: flex;
align-items: center;
margin-right: 20upx;
&:last-child {
margin-right: 0;
}
}
.list-icon {
font-weight: 600;
margin-left: 50upx;
&:last-child {
margin-left: 20upx;
}
}
.select-right {
margin-left: auto;
font-size: 24upx;
}
.gift-content {
width: 100%;
height: calc(100% - 152upx);
padding: 32upx 32upx;
gap: 2%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-between;
}
.gift-item {
display: flex;
flex-direction: column;
width: 49%;
box-sizing: border-box;
// background-color: red;
}
.gift-image {
margin: 0;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
}
.gift-name {
margin: 0;
display: flex;
height: 60upx;
font-size: 24upx;
color: #000000;
align-items: center;
}
.gift-menu {
margin-bottom: 20upx;
display: flex;
gap: 10upx;
flex-wrap: wrap;
min-height: 58upx;
font-size: 20upx;
color: #b3b3b3;
align-items: center;
}
.gift-menu-text {
padding: 4upx 4upx;
border: 2upx solid #ef8d15;
font-size: 24upx;
color: #ef8d15;
border-radius: 20upx;
margin-right: 10upx;
&:last-child {
margin-right: 0;
}
}
.gift-image-box {
position: relative;
}
.gift-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8upx;
min-width: 80upx;
height: 32upx;
box-sizing: border-box;
background: linear-gradient(#ef7e1a, #f1b009);
transform: skewX(15deg);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-image {
width: 24upx;
height: 24upx;
}
.tags {
display: flex;
align-items: center;
justify-content: center;
transform: skewX(-15deg);
}
.tag-text {
margin-left: 4upx;
font-weight: 500;
color: #fff;
font-size: 24upx;
}
.foot-tag {
position: absolute;
padding: 0 8upx;
bottom: 0;
right: 0;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
min-width: 110upx;
height: 32upx;
color: #fff;
font-size: 22upx;
box-sizing: border-box;
background: linear-gradient(#ef7e1a, #f1b009);
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
</style>
<template>
<view class="int">
<view
class="int-content"
v-for="item in activityList"
:key="item.id"
@click="toDetail(item.id)"
>
<view class="int-content-left">
<view class="content-tag">
<view class="tag-text">{{ locale === 'zh' ? item.typeZh : item.typeEn }}</view>
</view>
<image
class="content-image"
:src="locale === 'zh' ? item.coverImageZh : item.coverImageEn"
></image>
</view>
<view class="int-content-right">
<view class="content-title">{{ locale === 'zh' ? item.titleZh : item.titleEn }}</view>
<view class="content-text">{{ locale === 'zh' ? item.descZh : item.descEn }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activityList: []
}
},
created() {
this.getActivityList()
},
computed: {
locale() {
return this.$lang.locale
}
},
methods: {
toDetail(id) {
uni.navigateTo({
url: '/pages/activity_detail/activity_detail?id=' + id
})
},
// 获取活动列表
getActivityList() {
this.$request
.post('/app-api/member/score-rule/list', { platform: 2 })
.then(({ code, data }) => {
// console.log(res)
if (code == 0 && data) {
this.activityList = data
}
})
}
}
}
</script>
<style lang="scss" scoped>
.int {
padding: 30upx 0;
height: inherit;
overflow-y: auto;
}
.int-content {
margin-bottom: 20upx;
width: 100%;
height: 220upx;
display: flex;
padding: 0 30upx;
box-sizing: border-box;
border-bottom: 2upx solid #e7e7e7;
&:last-child {
margin-bottom: 0;
}
}
.int-content-left {
position: relative;
width: 200upx;
height: inherit;
.content-image {
width: 200upx;
height: 200upx;
}
}
.int-content-right {
flex: 1;
height: inherit;
padding-left: 20upx;
box-sizing: border-box;
.content-title {
font-size: 28upx;
color: #333;
margin-bottom: 20upx;
}
.content-text {
font-size: 20upx;
color: #666;
line-height: 36upx;
}
}
.content-tag {
position: absolute;
top: 0;
left: 0;
z-index: 9;
display: flex;
font-size: 24upx;
min-width: 120upx;
height: 40upx;
color: #fff;
align-items: center;
justify-content: center;
box-sizing: border-box;
transform: skewX(15deg);
background-color: #ff4d4f;
border-top-right-radius: 10upx;
border-bottom-left-radius: 10upx;
}
.tag-text {
transform: skewX(-15deg);
}
</style>
<template>
<view class="integral">
<dHeader :title="$lang.lang.integral.info"></dHeader>
<view class="container">
<view class="header">
<view class="avatar">
<image src="../../static/img/vip_avatar.png" mode=""></image>
</view>
<view class="content">
<view class="content-title"
>{{ $lang.lang.integral.headerTitle }}{{ levelInfo.levelName }}</view
>
<view class="content-text">
<view class="text">{{ $lang.lang.integral.spend }} {{ levelInfo.holdScore }}</view>
<view class="text">{{ $lang.lang.integral.available }} {{ levelInfo.usedScore }}</view>
</view>
<view class="divider">
<view class="divider-active" :style="{ width: `${score}%` }"></view>
<view class="divider-unm">{{ levelInfo.totalScore }}</view>
<view class="divider-level">{{ levelInfo.levelName }}</view>
</view>
</view>
<view class="classification">
<image class="classification-image" :src="levelIcon"></image>
<view class="log-menu">
<view class="menu-item" @click="toLog(0)"
>{{ $lang.lang.integral.logPoints }}&ensp;&gt;</view
>
<view class="menu-item" @click="toLog(1)"
>{{ $lang.lang.integral.logExchange }}&ensp;&gt;</view
>
</view>
</view>
</view>
<view class="main">
<view class="main-nav">
<view class="nav-item" :class="{ 'nav-active1': navIndex === 0 }" @click="navIndex = 0">{{
$lang.lang.integral.redeemGifts
}}</view>
<view class="nav-item" :class="{ 'nav-active2': navIndex === 1 }" @click="navIndex = 1">{{
$lang.lang.integral.pointsCampaign
}}</view>
</view>
<view class="main-content">
<gift v-show="navIndex === 0" :userInfo="userInfo"></gift>
<points v-show="navIndex === 1"></points>
</view>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
import points from './components/points.vue'
import gift from './components/gift.vue'
export default {
components: {
dHeader,
gift,
points
},
data() {
return {
navIndex: 0,
// 会员信息
levelInfo: {},
// 会员图标
levelIcon: '',
userInfo: {}
}
},
computed: {
score() {
if (this.levelInfo.totalScore) {
return Math.min(
Math.floor((this.levelInfo.totalScore / this.levelInfo.upperCount) * 100),
100
)
}
return 0
}
},
created() {
this.getUserInfo()
},
methods: {
toLog(val) {
const url = val === 1 ? '/pages/log/exchange' : '/pages/log/integral'
uni.navigateTo({ url })
},
// 获取个人信息
async getUserInfo() {
try {
const { code, data } = await this.$request.get('/app-api/member/user/get')
if (code === 0 && data) {
const { userScoreLevelInfo, ...args } = data
this.userInfo = args
this.levelIcon = userScoreLevelInfo.levelIcon
this.getMemberScore(this.$store.getters.id)
}
} catch (err) {}
},
// 获取会员积分信息
async getMemberScore(id) {
try {
const { code, data } = await this.$request.post(
`/app-api/member/user-score/info?id=${id}`,
{ id }
)
if (code === 0 && data) {
this.levelInfo = data
}
} catch (err) {}
}
}
}
</script>
<style>
@import url(../../static/css/integral.css);
</style>
<template>
<view>
<dHeader :title="$lang.lang.log.logPoints"></dHeader>
<view class="container">
<view class="item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
<div class="item-title">{{ $lang.lang.log.redeemGifts }}</div>
<div class="item-box">
<div class="box-img">
<image
class="imgs"
:src="locale === 'zh' ? item.imgZh : item.imgEn"
></image>
</div>
<div class="box-content">
<div class="content-text">
{{ locale === 'zh' ? item.rewardTitleZh : item.rewardTitleEn }}
</div>
<div class="content-time">{{ formatDate(item.createTime) }}</div>
</div>
<div class="box-right">
<view class="box-right-num">X{{ item.rewardCount }}</view>
<view class="box-right-text">-{{ item.scoreCount }}</view>
</div>
</div>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
list: []
}
},
created() {
this.getList()
},
computed: {
locale() {
return this.$lang.locale
}
},
methods: {
toDetail(id) {
uni.navigateTo({
url: '/pages/exchange_detail/exchange_detail?id=' + id
})
},
// 获取礼品列表
async getList() {
try {
const memberId = this.$store.getters.id
const { code, data } = await this.$request.post('/app-api/reward/redeem/record/list', {
memberId
})
if (code == 0 && data) {
this.list = data
}
} catch (error) {
console.log(error)
}
},
// 时间戳转换为YYYY-MM-DD HH:mm:ss
formatDate(time) {
const date = new Date(time)
const Y = date.getFullYear() + '-'
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
const D = date.getDate() + ' '
const h = date.getHours() + ':'
const m = date.getMinutes() + ':'
const s = date.getSeconds()
return Y + M + D + h + m + s
}
}
}
</script>
<style lang="scss">
page {
overflow: auto;
/* height: 100%; */
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
background-color: #edf2fa;
}
.container {
padding: 20upx;
box-sizing: border-box;
.item {
padding: 20upx 30upx 30upx 30upx;
margin-bottom: 20upx;
width: 100%;
box-sizing: border-box;
border-radius: 16upx;
box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, 0.1);
}
}
.item-title {
font-size: 24upx;
margin-bottom: 20upx;
}
.item-box {
width: 100%;
display: flex;
box-sizing: border-box;
}
.box-img {
width: 100upx;
height: 120upx;
margin-right: 20upx;
display: flex;
align-items: center;
justify-content: center;
.imgs {
width: 100upx;
height: 100upx;
object-fit: cover;
}
}
.box-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.content-text {
font-size: 24upx;
color: #7f7f7f;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.content-time {
font-size: 20upx;
color: #7f7f7f;
}
}
.box-right {
margin-left: 10upx;
width: 120upx;
height: 120upx;
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
border-radius: 50%;
font-size: 24upx;
color: #333333;
}
.box-right-img {
transform: translate(20upx, -60upx);
width: 120upx;
height: 120upx;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>
<template>
<view>
<dHeader :title="$lang.lang.log.logExchange"></dHeader>
<view class="container">
<view class="item" v-for="(item, index) in list" :key="index">
<div class="item-title">{{ locale == 'zh' ? item.sourceTypeZh : item.sourceTypeEn }}</div>
<div class="item-box">
<div class="box-img">
<image
class="imgs"
:src="imgArr[item.sourceType]"
></image>
</div>
<div class="box-content">
<div class="content-text">
{{ locale == 'zh' ? item.descZh : item.descEn }}
</div>
<div class="content-time">{{ formatDate(item.createTime) }}</div>
</div>
<div class="box-right">
<view class="box-right-num" v-if="item.rewardCount">X{{ item.rewardCount }}</view>
<view class="box-right-img" v-if="item.expired">
<image src="../../static/img/overdue.png"></image>
</view>
<view class="box-right-text">{{ item.operateType }}&ensp;{{ item.scoreCount }}</view>
</div>
</div>
</view>
</view>
</view>
</template>
<script>
import dHeader from '../../components/dHeader/index.vue'
export default {
components: {
dHeader
},
data() {
return {
list: []
}
},
created() {
this.getList()
},
computed: {
locale() {
return this.$lang.locale
},
// 图片数组
imgArr() {
return {
'1': '../../static/img/log_type1.png',
'2': '../../static/img/log_type2.png',
'4': '../../static/img/log_type4.png',
'5': '../../static/img/log_type5.png',
'6': '../../static/img/log_type6.png',
'7': '../../static/img/log_type7.png',
'8': '../../static/img/log_type8.png',
}
}
},
methods: {
// 获取列表
async getList() {
try {
const id = this.$store.getters.id
const { code, data } = await this.$request.post('/app-api/member/user-score/log', {
id
})
if (code == 0 && data) {
this.list = data
}
} catch (err) {}
},
// 时间戳转换为YYYY-MM-DD HH:mm:ss
formatDate(time) {
const date = new Date(time)
const Y = date.getFullYear() + '-'
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
const D = date.getDate() + ' '
const h = date.getHours() + ':'
const m = date.getMinutes() + ':'
const s = date.getSeconds()
return Y + M + D + h + m + s
}
}
}
</script>
<style lang="scss">
page {
overflow: auto;
/* height: 100%; */
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
background-color: #edf2fa;
}
.container {
padding: 20upx;
box-sizing: border-box;
.item {
padding: 20upx 30upx 30upx 30upx;
margin-bottom: 20upx;
width: 100%;
box-sizing: border-box;
border-radius: 16upx;
box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, 0.1);
}
}
.item-title {
font-size: 24upx;
margin-bottom: 20upx;
}
.item-box {
width: 100%;
display: flex;
box-sizing: border-box;
}
.box-img {
width: 100upx;
height: 120upx;
margin-right: 20upx;
display: flex;
align-items: center;
justify-content: center;
.imgs {
width: 100upx;
height: 100upx;
object-fit: cover;
}
}
.box-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.content-text {
font-size: 24upx;
color: #7f7f7f;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.content-time {
font-size: 20upx;
color: #7f7f7f;
}
}
.box-right {
margin-left: 10upx;
width: 120upx;
height: 120upx;
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: space-between;
border-radius: 50%;
font-size: 24upx;
color: #333333;
.box-right-text {
margin-top: auto;
}
}
.box-right-img {
transform: translate(20upx, -60upx);
width: 120upx;
height: 120upx;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>
This diff is collapsed.
This diff is collapsed.
<template>
<view class="count">
<div class="count-btn" @click="reduce" :class="{ 'count-btn-disabled': num <= 1 }">-</div>
<div class="count-text">{{ num }}</div>
<div class="count-btn" :class="{ 'count-btn-disabled': num >= max }" @click="add">+</div>
</view>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 1
},
max: {
type: Number,
default: 99
}
},
watch: {
value: {
handler(val) {
this.num = val
},
immediate: true
},
num(val) {
this.$emit('input', val)
}
},
data() {
return {
num: 1
}
},
methods: {
add() {
if (this.num < this.max) {
this.num++
}
},
reduce() {
if (this.num > 1) {
this.num--
}
}
}
}
</script>
<style lang="scss" scoped>
.count {
margin: 0;
padding: 0;
display: flex;
width: 130upx;
height: 40upx;
box-sizing: border-box !important;
border-radius: 8upx;
overflow: hidden;
border: 2upx solid #2373ea;
background-color: #045fe7;
.count-btn {
margin: 0;
padding: 0;
display: flex;
width: 28%;
color: #fff;
font-size: 24upx;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.count-text {
margin: 0;
padding: 0;
display: flex;
flex: 1;
font-size: 24upx;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #fff;
}
.count-btn-disabled {
background-color: #2373ea;
}
}
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
page {
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
}
.container {
padding: 32upx 32upx 0;
}
.address-list {
width: 100%;
}
.address-item {
background-color: #fff;
border-radius: 16upx;
padding: 28upx 0 20upx;
margin-bottom: 32upx;
box-shadow: 0 4upx 24upx 0 rgba(0, 0, 0, 0.1);
}
.item-header {
padding: 0 32upx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16upx;
}
.item-name {
font-size: 32upx;
font-weight: 500;
}
.item-phone {
font-size: 28upx;
font-weight: 500;
}
.item-content {
padding: 0 32upx;
font-size: 28upx;
color: #b3b3b3;
margin-bottom: 16upx;
}
.item-footer {
padding: 20upx 32upx 0;
border-top: 2upx solid #b3b3b3;
display: flex;
font-size: 28upx;
justify-content: space-between;
align-items: center;
}
.item-default {
color: #666;
padding: 8upx 16upx;
}
.item-default-active {
color: #ff4d4f;
}
.item-footer-right {
display: flex;
align-items: center;
}
.radio {
transform: scale(0.7);
}
.right-box {
color: #666;
display: flex;
align-items: center;
margin-left: 20upx;
}
.item-img {
width: 40upx;
height: 40upx;
margin-right: 8upx;
}
page {
overflow: auto;
/* height: 100%; */
/* #ifdef H5 */
padding-top: 140upx;
/* #endif */
/* #ifdef APP-PLUS */
padding-top: calc(var(--status-bar-height) + 100upx);
/* #endif */
}
.integral {
padding: 0 32upx;
height: inherit;
}
.container {
width: 100%;
display: flex;
height: inherit;
flex-direction: column;
box-sizing: border-box;
background-color: #C3C8D3;
border-top-left-radius: 12upx;
border-top-right-radius: 12upx;
}
.header {
padding: 32upx 32upx 20upx;
height: 240upx;
display: flex;
color: #8C8E97;
font-size: 24upx;
box-sizing: border-box;
}
.avatar image {
width: 68upx;
height: 68upx;
}
.content {
flex: 1;
margin-left: 10upx;
}
.content .content-title {
font-size: 32upx;
color: #2A426B;
margin-bottom: 16upx;
text-shadow: 2upx 4upx 12upx rgba(0, 0, 0, 0.5);
}
.content .content-text {
display: flex;
}
.content .content-text .text {
text-align: left;
margin-right: 20upx;
font-size: 20upx;
/* transform: scale(0.8); */
}
.content .divider {
position: relative;
margin-top: 76upx;
width: 260upx;
height: 4upx;
background-color: #fff;
border-radius: 4upx;
}
.divider-active {
position: absolute;
top: 0;
left: 0;
width: 130upx;
height: 4upx;
background-color: #2A426B;
border-radius: 4upx;
}
.divider-unm {
position: absolute;
top: 0;
right: 50%;
color: #2A426B;
transform: translate(50%, -110%);
}
.divider-level {
position: absolute;
top: 0;
right: 0;
color: #2A426B;
transform: translate(130%, -50%);
}
.classification {
position: relative;
display: flex;
flex-direction: column;
}
.classification-image {
position: absolute;
width: 164upx;
height: 116upx;
transform: translateY(-60upx);
}
.log-menu {
margin-top: auto;
text-align: right;
color: #8A8E96;
}
.menu-item {
font-size: 24upx;
margin-top: 10upx;
}
.main {
overflow: hidden;
flex: 1;
height: calc(100% - 240upx);
background-color: #fff;
border-top-left-radius: 18upx;
border-top-right-radius: 18upx;
box-shadow: -2px 0px 12px 0 rgba(0, 0, 0, 0.1)
}
.main-nav {
display: flex;
width: 100%;
height: 80upx;
align-items: center;
justify-content: space-around;
background-color: #D1D5E1;
box-sizing: border-box;
}
.nav-item {
flex: 1;
display: flex;
height: 80upx;
font-size: 28upx;
color: #3F4044;
align-items: center;
justify-content: center;
border: 0;
}
.nav-active1 {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 80% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.nav-active2 {
clip-path: polygon(20% 0%, 0% 100%, 100% 100%, 100% 0%);
/* clip-path: path('M 0 0 H 80 Q 100 0 100 20 V 100 H 0 Z'); */
font-weight: 600;
background-color: #fff !important;
color: #000 !important;
position: relative;
overflow: hidden;
}
.main-content {
height: calc(100% - 80upx);
box-sizing: border-box;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment