118 lines
2.0 KiB
Vue
118 lines
2.0 KiB
Vue
<template>
|
|
<view>
|
|
<template v-if="isBind">
|
|
<view class="goods">
|
|
<view class="u-m-t-24 u-flex u-col-top u-relative">
|
|
<view class="img">
|
|
<up--image :width="63" :height="63" :radius="3" :src="data.coverImg"></up--image>
|
|
</view>
|
|
<view class="w-full info u-p-l-30">
|
|
<view class="color-333 u-flex u-row-between">
|
|
<view class="u-flex">
|
|
<text class="u-m-r-24">{{ data.name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-m-t-10 u-row-right">
|
|
<view class="btn-default btn" @tap="del">删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="goods-wrap">
|
|
<view class="goods-item u-flex" @click="goodsClick">
|
|
<my-radio @click="goodsClick" :modelValue="data.checked"></my-radio>
|
|
<view class="u-flex u-m-l-10">
|
|
<text class="">{{ data.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const emits = defineEmits(['goodsClick', 'del']);
|
|
|
|
const props = defineProps({
|
|
isBind: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
index: {
|
|
type: Number
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
checked: false
|
|
};
|
|
}
|
|
},
|
|
showDetail: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
function goodsClick() {
|
|
emits('goodsClick', props.index);
|
|
}
|
|
|
|
function del() {
|
|
emits('del', props.index);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$imgSize: 126rpx;
|
|
|
|
.btn {
|
|
padding: 6rpx 28rpx;
|
|
border-radius: 100rpx;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
|
|
.btn-default {
|
|
border-color: #999;
|
|
color: #999;
|
|
}
|
|
|
|
.img {
|
|
width: $imgSize;
|
|
height: $imgSize;
|
|
}
|
|
|
|
.goods {
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
background-color: #fff;
|
|
padding: 32rpx 28rpx 32rpx 28rpx;
|
|
font-size: 28rpx;
|
|
|
|
.skus {
|
|
background: #f9f9f9;
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
padding: 20rpx;
|
|
|
|
.sku {
|
|
color: #000;
|
|
font-weight: 700;
|
|
padding: 6rpx 40rpx;
|
|
}
|
|
|
|
.skds {
|
|
gap: 10rpx 50rpx;
|
|
}
|
|
}
|
|
}
|
|
.goods-wrap {
|
|
padding: 0 20upx;
|
|
.goods-item {
|
|
padding: 20upx 0;
|
|
border-bottom: 1px solid #ececec;
|
|
}
|
|
}
|
|
</style>
|