239 lines
4.9 KiB
Vue
239 lines
4.9 KiB
Vue
<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> |