|
@@ -1,6 +1,47 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
+ <view class="goods-detail">
|
|
|
+ <view>
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view class="goods-head">
|
|
|
+ <view class="goods-imgs">
|
|
|
+ <view class="goods-staus">已售罄</view>
|
|
|
+ <u-swiper height="340" :border-radius="0" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
|
|
|
+ </view>
|
|
|
+ <view class="goods-name ellipsis-two">的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就</view>
|
|
|
+ <view class="goods-price">
|
|
|
+ <view><text>50</text>乐豆</view>
|
|
|
+ <view>
|
|
|
+ <u-number-box v-model="nums"></u-number-box>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品属性 -->
|
|
|
+ <view class="goods-attr">
|
|
|
+ <view>
|
|
|
+ <view>运费</view>
|
|
|
+ <view>免运费</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>限购</view>
|
|
|
+ <view>每人限购1件</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>售后</view>
|
|
|
+ <view>兑换商品,一经售出,不支持退换货</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品详情 -->
|
|
|
+ <view class="goods-content">
|
|
|
+ asdfsafsaf
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部浮动按钮 -->
|
|
|
+ <view class="bottom-btns">
|
|
|
+ <view><u-button type="primary" @click="addCart">加入购物车</u-button></view>
|
|
|
+ <view><u-button type="error">立即下单</u-button></view>
|
|
|
+ </view>
|
|
|
+ <!-- 购物车 -->
|
|
|
+ <uni-cart-fix></uni-cart-fix>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -8,12 +49,118 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ imageList:[
|
|
|
+ {image:'https://cdn.uviewui.com/uview/example/fade.jpg'},
|
|
|
+ {image:'https://cdn.uviewui.com/uview/example/fade.jpg'}
|
|
|
+ ],
|
|
|
+ nums:1
|
|
|
};
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 加入购物车
|
|
|
+ addCart(){
|
|
|
+ // 请求接口
|
|
|
+ this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + this.nums
|
|
|
+ },
|
|
|
+ // 立即下单
|
|
|
+ toOrder(){
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-
|
|
|
+page{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.goods-detail{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-head{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ .goods-imgs{
|
|
|
+ position: relative;
|
|
|
+ .goods-staus{
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10000;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 150rpx;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -75rpx;
|
|
|
+ margin-left: -75rpx;
|
|
|
+ color: #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-name{
|
|
|
+ padding:0 20upx;
|
|
|
+ margin: 10upx 0;
|
|
|
+ line-height: 40upx;
|
|
|
+ }
|
|
|
+ .goods-price{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:0 20upx 20upx;
|
|
|
+ >view{
|
|
|
+ &:first-child{
|
|
|
+ font-size: 22upx;
|
|
|
+ text{
|
|
|
+ color: red;
|
|
|
+ font-size: 36upx;
|
|
|
+ margin-right: 6upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-attr{
|
|
|
+ margin: 20upx 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20upx;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ > view{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >view{
|
|
|
+ padding: 10upx 0;
|
|
|
+ &:first-child{
|
|
|
+ padding-right: 15upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-content{
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20upx;
|
|
|
+ box-shadow: 1px 1px 3px #eee;
|
|
|
+ min-height: 50vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btns{
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 15upx;
|
|
|
+ >view{
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|