|
@@ -1,23 +1,48 @@
|
|
<template>
|
|
<template>
|
|
<view>
|
|
<view>
|
|
<navigation-bar background-color="#fff" front-color="#000000" />
|
|
<navigation-bar background-color="#fff" front-color="#000000" />
|
|
- <u-image width="100%" height="300rpx" :src="goods.goodsImg"></u-image>
|
|
|
|
- <view class="title">
|
|
|
|
|
|
+ <u-image width="100%" height="400rpx" :src="goods.goodsImg"></u-image>
|
|
|
|
+ <view class="title pad">
|
|
{{goods.goodsName}}
|
|
{{goods.goodsName}}
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="price pad">
|
|
|
|
+ ¥{{goods.price}} {{goods.goodsUnits}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="pad">
|
|
|
|
+ <u-tag class="tag" v-for="(item,index) in type" :key="index" :text="item" type="warning" plain></u-tag>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="pad">
|
|
|
|
+ <u--text prefixIcon="home" iconStyle="font-size: 50rpx" :text="goods.merchantName" size="26"></u--text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="pad">
|
|
|
|
+ <u--text prefixIcon="map" iconStyle="font-size: 50rpx" :text="goods.tradeAreaName" size="26"></u--text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="pad des">
|
|
|
|
+ <u--text text="商品描述:" size="24"></u--text>
|
|
|
|
+ <u--text :text="goods.description? goods.description : '卖家很懒,什么都没有留下'" size="24"></u--text>
|
|
|
|
+ </view>
|
|
<view class="footer">
|
|
<view class="footer">
|
|
- <u-button class="custom-style" type="warning">加入购物车</u-button>
|
|
|
|
|
|
+ <u-button class="custom-style" type="warning" @click="addCar()">加入购物车</u-button>
|
|
<u-button class="custom-style" type="error">立即购买</u-button>
|
|
<u-button class="custom-style" type="error">立即购买</u-button>
|
|
</view>
|
|
</view>
|
|
|
|
+ <u-popup :show="show" @close="close" @open="open">
|
|
|
|
+ <view>
|
|
|
|
+ <text>出淤泥而不染,濯清涟而不妖</text>
|
|
|
|
+ </view>
|
|
|
|
+ </u-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import common from '../../common/js/common'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
id: '',
|
|
id: '',
|
|
- goods: {}
|
|
|
|
|
|
+ goods: {},
|
|
|
|
+ type: [],
|
|
|
|
+ show: false,
|
|
|
|
+ num: 1
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
onLoad(option) {
|
|
@@ -31,6 +56,28 @@
|
|
}
|
|
}
|
|
this.$api.getGoodsDetails(params).then(res => {
|
|
this.$api.getGoodsDetails(params).then(res => {
|
|
this.goods = res.data
|
|
this.goods = res.data
|
|
|
|
+ if (this.goods) {
|
|
|
|
+ this.type = this.goods.goodsType.toString().split("、")
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ addCar() {
|
|
|
|
+ this.show = true
|
|
|
|
+ let user = uni.getStorageInfoSync("info")
|
|
|
|
+ let params = {
|
|
|
|
+ buyUserId: user.id,
|
|
|
|
+ enterpriseId: this.goods.merchantId,
|
|
|
|
+ shopId: shopId,
|
|
|
|
+ tradeAreaId: this.goods.tradeAreaId,
|
|
|
|
+ saleGoodsInfoId: this.goods.id,
|
|
|
|
+ buyUserType: user.userType,
|
|
|
|
+ buyType: 2,
|
|
|
|
+ goodsImg: this.goods.goodsImg,
|
|
|
|
+ goodsName: this.goods.goodsName,
|
|
|
|
+ buyNum: num
|
|
|
|
+ }
|
|
|
|
+ this.$api.addCar(this.goods).then(res => {
|
|
|
|
+ console.log(res)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -42,18 +89,43 @@
|
|
padding: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .pad {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 10rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+
|
|
.title {
|
|
.title {
|
|
- margin: 10rpx;
|
|
|
|
|
|
+ font-size: 42rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .price {
|
|
|
|
+ color: red;
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ // .flex-box {
|
|
|
|
+
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ .tag {
|
|
|
|
+ width: auto;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
.custom-style {
|
|
.custom-style {
|
|
- width: 400rpx;
|
|
|
|
|
|
+ width: 50%;
|
|
height: 100rpx;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .des {
|
|
|
|
+ border-top: 1rpx #888 solid;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
.footer {
|
|
.footer {
|
|
|
|
+ width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 1rpx;
|
|
bottom: 1rpx;
|