first
This commit is contained in:
239
pageUser/index/components/user.vue
Normal file
239
pageUser/index/components/user.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view class=" goods">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex u-col-top">
|
||||
<image v-if="data.headImg" :src="data.headImg" class="img"></image>
|
||||
<view class="img" v-else></view>
|
||||
</view>
|
||||
<view class="u-p-l-30 u-flex-1">
|
||||
<view class="u-flex">
|
||||
<view class="color-000 font-bold">{{data.nickName}}</view>
|
||||
<view class="color-999 u-m-l-40" @click="remark">备注</view>
|
||||
</view>
|
||||
<view class="u-m-t-6 u-flex u-row-between">
|
||||
<view class="vip isvip" v-if="data.isVip">会员</view>
|
||||
<view class=" vip noVip" v-else>非会员</view>
|
||||
<view class="color-main" @click="bindMoblie">绑定号码</view>
|
||||
</view>
|
||||
<view class="u-m-t-6 color-666 ">
|
||||
{{data.telephone||''}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="info u-m-t-20 u-flex">
|
||||
<view class="u-flex-1 u-text-center" @tap="toYue">
|
||||
<view class="font-bold color-000 pr-16" >{{data.amount}}</view>
|
||||
<view class="u-flex u-row-center" >
|
||||
<view class="color-999">余额</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center" @tap="toUser">
|
||||
<view class="font-bold color-000 pr-16">{{data.totalScore}}</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">积分</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center">
|
||||
<view class="font-bold color-000 pr-16">0</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">优惠券</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center">
|
||||
<view class="font-bold color-000 ">0.00</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">已消费</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-24 u-flex u-row-between">
|
||||
<view></view>
|
||||
<view class="u-flex">
|
||||
<view class="btn-default btn">查看订单</view>
|
||||
<view class="btn-primary btn u-m-l-38" @click="moreOperate">更多操作</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {ColorMain} from '@/commons/color.js'
|
||||
const emits=defineEmits(['remark','bindMoblie','moreOperate'])
|
||||
const props = defineProps({
|
||||
index:{
|
||||
type:Number
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return{}
|
||||
}
|
||||
},
|
||||
showChecked:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
showDetail:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
function toUser(){
|
||||
go.to('PAGES_USER_INFO',{id:''})
|
||||
}
|
||||
function toYue(){
|
||||
go.to('PAGES_RECHARGE_INDEX',{id:''})
|
||||
}
|
||||
|
||||
function remark(){
|
||||
console.log(props.index);
|
||||
emits('remark',props.index)
|
||||
}
|
||||
function bindMoblie(){
|
||||
emits('bindMoblie',props.index)
|
||||
}
|
||||
function moreOperate(){
|
||||
emits('moreOperate',props.index)
|
||||
}
|
||||
//携带参数type edit跳转到商品添加页面，编辑与添加同一页面，根据type值来判断
|
||||
function toEdit(){
|
||||
go.to('PAGES_PRODUCT_ADD',{type:'edit'})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$imgSize: 126rpx;
|
||||
$price-color: #F02C45;
|
||||
.isvip{
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
}
|
||||
.pr-16{
|
||||
padding-right: 16px;
|
||||
}
|
||||
.info{
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 20rpx;
|
||||
}
|
||||
.vip{
|
||||
padding:2rpx 6rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.noVip{
|
||||
background-color: #F9F9F9;
|
||||
color: #999;
|
||||
}
|
||||
.btn{
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
.btn-primary{
|
||||
border-color: $my-main-color;;
|
||||
color: $my-main-color;
|
||||
}
|
||||
.btn-default{
|
||||
border-color: #F4F4F4;
|
||||
color: #666;
|
||||
}
|
||||
.price {
|
||||
color: $price-color;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: $imgSize;
|
||||
height: $imgSize;
|
||||
background-color: #eee;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.stock {
|
||||
padding-right: 46rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stock::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
width: 16rpx;
|
||||
border: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.goods {
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 24rpx 28rpx 16rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
.skus{
|
||||
background: #F9F9F9;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 28rpx 42rpx;
|
||||
.sku{
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding: 6rpx 40rpx;
|
||||
}
|
||||
.skds{
|
||||
gap: 10rpx 50rpx;
|
||||
}
|
||||
.skd{
|
||||
padding: 14rpx 40rpx;
|
||||
background: #F0F2F5;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
.tag{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12rpx;
|
||||
right: 0;
|
||||
padding: 2rpx 4rpx;
|
||||
border-radius: 0rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
.tag-primary{
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user