| | |
| | | <view class="top-img-container">
|
| | | <image :src="dto.cover" class="top-img" mode="aspectFill"></image>
|
| | | <view class="icon-container">
|
| | | <image src="../../../static/common/icon-sc.png" @click="collectItem(dto)" class="icon-sc"></image>
|
| | | <image v-if="!dto.collection" src="../../../static/common/icon-sc.png" @click="collectItem(dto)"
|
| | | class="icon-sc"></image>
|
| | | <image v-if="dto.collection" src="../../../static/common/icon-sc-fill.png" @click="collectItem(dto)"
|
| | | class="icon-sc"></image>
|
| | |
|
| | |
|
| | | <!-- <view class="num">12</view>-->
|
| | | </view>
|
| | | <view class="icon-container">
|
| | | <image src="../../../static/common/icon-shop.png" @click="submitShopping(dto)" class="icon-shop">
|
| | | <image src="../../../static/common/icon-shop.png" @click="toShopping(dto)" class="icon-shop">
|
| | | <view class="image-shop-number">{{shopnum||''}}</view>
|
| | | </image>
|
| | |
|
| | | </view>
|
| | | </view>
|
| | | <view class="trade-info-container">
|
| | | <view class="title flex">
|
| | | <view class="level m-r-15">{{ dto.levelStr || '-' }}级</view>
|
| | | <view class="level m-r-15">{{ dto.levelStr || '-' }}</view>
|
| | | <view class="">
|
| | | {{ dto.name || '-' }}
|
| | | </view>
|
| | |
| | | data() {
|
| | | return {
|
| | | id: '',
|
| | | dto: {}
|
| | | dto: {},
|
| | | shopnum: 0,
|
| | | }
|
| | | },
|
| | | onLoad(options) {
|
| | |
| | | if (this.id) {
|
| | | this.getDetail()
|
| | | }
|
| | | this.refreshShopNum()
|
| | | },
|
| | | methods: {
|
| | | async collectItem(dto){
|
| | | await this.$message.confirm('是否添加到收藏')
|
| | | async refreshShopNum() {
|
| | | this.shopnum = await this.$store.dispatch('submitShopping', dto);
|
| | | },
|
| | | async collectItem(dto) {
|
| | | await this.$message.confirm(`是否${dto.collection?'移除':'添加到'}收藏`)
|
| | | this.$message.showLoading()
|
| | | const {
|
| | | code,
|
| | | data
|
| | | } = await this.$http.request('post', '/api/collect/add', {
|
| | | data: {
|
| | | flowerId: dto.id
|
| | | }
|
| | | })
|
| | | } = await this.$http.request(dto.collection ? "get" : 'post', dto.collection ? '/api/collect/delete' :
|
| | | '/api/collect/add', {
|
| | | data: {
|
| | | flowerId: dto.id
|
| | | },
|
| | | params: {
|
| | | id: dto.id
|
| | | }
|
| | | })
|
| | | if (code === 0) {
|
| | | this.$message.showToast('收藏成功')
|
| | | this.$message.showToast('操作成功')
|
| | | dto.collection = !dto.collection
|
| | | this.$forceUpdate()
|
| | | }
|
| | | |
| | |
|
| | | this.$message.hideLoading()
|
| | | },
|
| | | async submitShopping(dto) {
|
| | |
| | | this.$message.showLoading()
|
| | | await this.$store.dispatch('submitShopping', dto);
|
| | | this.$message.hideLoading()
|
| | | this.refreshShopNum()
|
| | | },
|
| | | async getDetail() {
|
| | | this.$message.showLoading()
|
| | |
| | | this.$message.hideLoading()
|
| | |
|
| | | },
|
| | | toShopping() {
|
| | | uni.navigateTo({
|
| | | url: '/sub_pages/customer/shopping/shopping'
|
| | | })
|
| | | },
|
| | | openbrand() {
|
| | | uni.navigateTo({
|
| | | url: '/sub_pages/customer/shop/shop?id=' + (this.dto.id || '')
|
| | |
| | |
|
| | | <style lang="scss" scoped>
|
| | | .trade-detail {
|
| | | background-color: #FFFFFF;
|
| | | background-color: #FFFFFF; |
| | | .image-shop-number { |
| | | width: 30rpx; |
| | | height: 30rpx; |
| | | background: #F20000; |
| | | line-height: 30rpx; |
| | | text-align: center; |
| | | position: absolute; |
| | | right: 0rpx; |
| | | top: -6rpx; |
| | | color: #FFFFFF; |
| | | border-radius: 50%; |
| | | font-size: 24rpx; |
| | | }
|
| | |
|
| | | .trade-info-container {
|
| | | padding: 46rpx 30rpx;
|
| | |
| | | position: absolute;
|
| | | top: 20rpx;
|
| | | width: 80rpx;
|
| | | left: 40rpx;
|
| | | right: 140rpx;
|
| | | height: 80rpx;
|
| | | background: rgba(0, 0, 0, 0);
|
| | | background: rgba(0, 0, 0, 0.42);
|
| | | border-radius: 50%;
|
| | | display: flex;
|
| | |
|
| | | .icon-sc {
|
| | | width: 54rpx;
|
| | |
| | | height: 54rpx;
|
| | | margin: 0 auto;
|
| | | margin-top: 12rpx;
|
| | | display: inline-block;
|
| | |
|
| | | display: inline-block; |
| | | margin-left: 12rpx;
|
| | | position: relative;
|
| | | |
| | | }
|
| | |
|
| | | .num {
|
| | |
| | | }
|
| | |
|
| | | .icon-container:last-child {
|
| | | left: 100rpx;
|
| | | right: 20rpx;
|
| | | }
|
| | |
|
| | | // .icon-container:first-child {
|