You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
4.7 KiB
236 lines
4.7 KiB
<template>
|
|
<view class="flex card">
|
|
<view>
|
|
<uv-checkbox-group
|
|
v-model="checkboxValue"
|
|
shape="circle"
|
|
@change="onCheckChange"
|
|
>
|
|
<uv-checkbox
|
|
size="36rpx"
|
|
icon-size="36rpx"
|
|
activeColor="#7451DE"
|
|
:name="1"
|
|
></uv-checkbox>
|
|
</uv-checkbox-group>
|
|
</view>
|
|
<view class="flex right" @click="jumpToProductDetail">
|
|
<view class="img-box">
|
|
<image class="img" :src="data.url" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="title">{{ data.name }}</view>
|
|
<view class="desc">{{ data.desc }}</view>
|
|
<view class="flex price-box">
|
|
<view class="flex price">¥<text class="highlight">{{ data.price.toFixed(2) }}</text></view>
|
|
</view>
|
|
<view class="flex tool">
|
|
<view class="flex count">
|
|
规格：<text class="highlight">{{ data.countDesc || data.count }}</text>
|
|
<uv-icon name="arrow-down" color="#7451DE" size="24rpx" :bold="true"></uv-icon>
|
|
</view>
|
|
<button class="flex btn" @click.stop="openPicker">编辑</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="data.customized" class="sup customized">
|
|
定制组合
|
|
</view>
|
|
<view v-else-if="data.free" class="sup free">
|
|
自定组合
|
|
</view>
|
|
|
|
<uv-picker ref="picker" :columns="[data.options]" keyName="label" confirmColor="#7451DE" @confirm="onChange"></uv-picker>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'read'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
checkboxValue : [],
|
|
}
|
|
},
|
|
computed: {
|
|
checked: {
|
|
set(val) {
|
|
this.checkboxValue = val ? [1] : []
|
|
|
|
if (this.data.selected == val) {
|
|
return
|
|
}
|
|
this.$emit('select', val)
|
|
},
|
|
get() {
|
|
return this.checkboxValue[0] == 1 ? true : false
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(val) {
|
|
this.checked = val.selected
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
},
|
|
methods: {
|
|
onCheckChange(arr) {
|
|
this.checked = arr[0] == 1 ? true : false
|
|
},
|
|
openPicker() {
|
|
console.log(this.data.id, 'openPicker')
|
|
this.$refs.picker.open();
|
|
},
|
|
onChange(e) {
|
|
const target = e.value[0]
|
|
console.log('onChange', target)
|
|
|
|
this.$emit('change', { price: target.value, count: target.count, countDesc: target.label })
|
|
},
|
|
jumpToProductDetail() {
|
|
console.log(this.data.id, 'jumpToProductDetail')
|
|
this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.data.id}`)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
position: relative;
|
|
height: 240rpx;
|
|
padding: 0 32rpx;
|
|
background-image: linear-gradient(#FAFAFF, #F3F3F3);
|
|
border: 2rpx solid #FFFFFF;
|
|
border-radius: 32rpx;
|
|
box-sizing: border-box;
|
|
column-gap: 24rpx;
|
|
overflow: hidden;
|
|
|
|
/deep/ .uv-checkbox__label-wra {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
column-gap: 24rpx;
|
|
}
|
|
|
|
.img {
|
|
&-box {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
font-size: 26rpx;
|
|
color: #8B8B8B;
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 8rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.price {
|
|
&-box {
|
|
margin-top: 8rpx;
|
|
justify-content: flex-start;
|
|
column-gap: 20rpx;
|
|
}
|
|
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
color: #7451DE;
|
|
|
|
.highlight {
|
|
margin: 0 8rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
&-origin {
|
|
font-size: 28rpx;
|
|
line-height: 1;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.tool {
|
|
margin-top: 8rpx;
|
|
justify-content: space-between;
|
|
|
|
.count {
|
|
.highlight {
|
|
margin: 0 8rpx;
|
|
color: #252545;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 8rpx 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #FFFFFF;
|
|
background: #7451DE;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sup {
|
|
position: absolute;
|
|
top: 28rpx;
|
|
right: -60rpx;
|
|
padding: 5rpx 52rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
white-space: nowrap;
|
|
transform: rotate(45deg);
|
|
|
|
&.customized {
|
|
color: #FFFFFF;
|
|
background: #252545;
|
|
}
|
|
|
|
&.free {
|
|
color: #252545;
|
|
background: #D7D7FF;
|
|
}
|
|
}
|
|
</style>
|