shop-applet/pages/commissionedSales/index/index.vue

164 lines
2.7 KiB
Vue

<template>
<view class="select_warehouse">
<view class="wrapper flex_a_c_j_sb">
<block v-for="item in goodsData" :key="item.name">
<view class="select_item" @click="navigato(item.type)"
:style="{'background-image': `url(${item.src})`}">
<view class="select_itemimga" v-if='item.type==1'>
<image :src="item.img" mode=""></image>
</view>
<view class="select_itemimgb" v-else>
<image :src="item.img" mode=""></image>
</view>
<view class="title">
<view class="titlea">
{{ item.name }}
</view>
<view class="titleb">
{{ item.name1 }}
</view>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsData: [{
name: '我发起的',
name1: '委托销售商品',
type: 1,
src: require('@/static/images/wtbg1.png'),
img: require('@/static/images/wtt1.png')
},
{
name: '我收到的',
name1: '帮助销售商品',
type: 2,
src: require('@/static/images/wtbg2.png'),
img: require('@/static/images/wtt2.png')
}
],
}
},
onLoad() {
},
onShow() {
},
methods: {
navigato(type) {
if (type === 1) {
uni.navigateTo({
url: `/pages/commissionedSales/initiateDelegation/index`
});
} else {
uni.navigateTo({
url: `/pages/commissionedSales/receivedCommission/index`
});
}
},
},
}
</script>
<style lang="scss">
.select_warehouse {
padding-top: 20px;
}
.wrapper {
width: 694.74rpx;
margin: 0 auto;
}
.goods-wrapper {
.item {
display: flex;
height: 175.44rpx;
width: 100%;
background-color: #fff;
margin-top: 21.05rpx;
border-radius: 8px;
padding: 12px;
.l_cont {
image {
width: 133.33rpx;
height: 133.33rpx;
border-radius: 8px;
}
}
.r_cont {
margin-left: 17.54rpx;
}
}
}
.select_item {
width: 336rpx;
height: 161rpx;
border-radius: 8px;
background-color: #eee;
display: flex;
color: #fff;
background-size: 100% 100%;
background-repeat: no-repeat;
.select_itemimga {
width: 59rpx;
height: 63rpx;
margin-top: 49rpx;
margin-left: 42rpx;
image {
width: 100%;
height: 100%;
}
}
.select_itemimgb {
width: 75rpx;
height: 65rpx;
margin-top: 49rpx;
margin-left: 42rpx;
image {
width: 100%;
height: 100%;
}
}
.title {
margin-left: 23rpx;
margin-top: 37rpx;
.titlea {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.titleb {
margin-top: 5rpx;
font-size: 25rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
}
}
}
</style>