|
@@ -0,0 +1,362 @@
|
|
|
+<template>
|
|
|
+ <view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
|
|
|
+ <tm-menubars title="详情" :shadow="0" :showback="true"></tm-menubars>
|
|
|
+ <view class="C1b1b1b">
|
|
|
+ <tm-swiper :list="swipList" :autoplay="true" :indicator-dots="true" height="288px" circular></tm-swiper>
|
|
|
+ <view style="padding: 10px 20px;">
|
|
|
+ <view class="del_title">
|
|
|
+ <view>黑色手提包</view>
|
|
|
+ <view class="de_tag">运动休闲</view>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;justify-content: space-between;">
|
|
|
+ <view>
|
|
|
+ <text class="sale_price">¥1299.00</text>
|
|
|
+ <text class="original_price">原价:2088</text>
|
|
|
+ </view>
|
|
|
+ <view style="font-size: 14px;color:#ababab;">销量:42</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <div class="zhuti" style="padding-bottom:60px !important;">
|
|
|
+ <tm-sheet class="kuang" style="padding-bottom: 30px !important;">
|
|
|
+ <view style="width: 98%;margin:0 auto;margin-top:20px !important;position: relative;">
|
|
|
+ <view style="padding: 10px 10px 0px;">
|
|
|
+ <view class="line_bottom" style="font-size: 15px;">商品参数:</view>
|
|
|
+ <view class="line_bottom">
|
|
|
+ <view class="" v-for="(item,index) in showList" :key="index">
|
|
|
+ <view class="line_my text-white" >
|
|
|
+ <view style="width: 100px;">{{item}}:</view>
|
|
|
+ <view >
|
|
|
+ {{index==0?paramList.name:''}}
|
|
|
+ {{index==1?paramList.style:''}}
|
|
|
+ {{index==2?paramList.goodNo:''}}
|
|
|
+ {{index==3?paramList.size:''}}
|
|
|
+ {{index==4?paramList.artNo:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="padding: 10px 0px 0px;">
|
|
|
+ <text v-html="explain"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tm-sheet>
|
|
|
+ <view class="" style="text-align: center;margin: 20px 0;font-size: 15px;">
|
|
|
+ - 猜你喜欢 -
|
|
|
+ </view>
|
|
|
+ <view style="width: 94%;margin:0 auto;" class="remen">
|
|
|
+ <view v-for="(item,index) in listdata" class="round-5 contone mt-20" :class="index%2==0?'fl':'fr'"
|
|
|
+ @click="goDetail(item.id)" style="background-color: #1B1B1B;">
|
|
|
+ <image class="logo" :src="item.image" mode="widthFix"></image>
|
|
|
+ <view class="pa-15 text-size-s">
|
|
|
+ <view class="fr biaoqian">运动休闲</view>
|
|
|
+ <view class="">
|
|
|
+ <text class="text-size-lg">{{item.text}}</text>
|
|
|
+ <view class="text-gray mt-6">销量:{{item.xiaol}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="mt-2 flex-between flex-center">
|
|
|
+ <view class="touxiang mt-30">
|
|
|
+ <text class="text-white text-size-m text-weight-b">{{item.jiage}}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image @click="jiarufuFun(item)" class="remenzan" src="/static/img/86.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ <view style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
|
|
|
+ <image src="/static/img/30.png" mode="widthFix"></image>
|
|
|
+ <text class="text-size-s">下拉加载更多~</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ <view class="bottom_btn">
|
|
|
+ <view class="btn_col" style="background: #1c1c1c;" @click="goCollect">
|
|
|
+ <image style="width: 18px;height: 16px;" src="/static/img/98.png" mode="widthFix"></image>
|
|
|
+ <text style="margin-left: 10px;">收藏</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn_gouwu" style="background:#303030;" @click="goBar">
|
|
|
+ <image src="/static/img/97.png" mode="widthFix" style="width: 15px;height: 16px;"></image>
|
|
|
+ <text style="margin-left: 10px;">添加购物车</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn_buy" style="background: #0178fd;" @click="goBuy">立即购买</view>
|
|
|
+ </view>
|
|
|
+ <!-- 弹出层消息 -->
|
|
|
+ <tm-message ref="toast"></tm-message>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ myRequest
|
|
|
+ } from '@/api/request.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showList: ['名称', '款式', '商品编号', '尺寸', '货号'],
|
|
|
+ xianshi: true,
|
|
|
+ swipList: [{
|
|
|
+ src: '../../static/img/99.png'
|
|
|
+ }, {
|
|
|
+ src: '../../static/img/99.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: '../../static/img/99.png'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 参数列表
|
|
|
+ paramList: {
|
|
|
+ name: '黑色公文包',
|
|
|
+ style: '黑色 QD2334664 L',
|
|
|
+ goodNo: '19862088811',
|
|
|
+ size: 'S/M/L',
|
|
|
+ artNo: 'QD2334664'
|
|
|
+ },
|
|
|
+ // 说明
|
|
|
+ explain: "<ul style='font-size: 14px;text-indent: 0.5em;'><li style='margin-bottom: 10px;'>划线价格,商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等,并非原价,仅供参考。</li><li> 未划线价格,商品的实时标价,不因表述的差异改变性质。具体成交价格根据商品参加活动,或会员使用优惠券、积分等发生变化,最终以订单结算页价格为准。</li></ul>",
|
|
|
+ listdata: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ created() {
|
|
|
+ this.sys = uni.getSystemInfoSync();
|
|
|
+ this.randouh()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ jiarufuFun(){
|
|
|
+
|
|
|
+ },
|
|
|
+ goDetail(){
|
|
|
+
|
|
|
+ },
|
|
|
+ randouh() {
|
|
|
+ let list2 = [],
|
|
|
+ that = this;
|
|
|
+ for (let i = 0; i < 8; i++) {
|
|
|
+ list2.push({
|
|
|
+ image: '../../static/img/90.png',
|
|
|
+ text: '帽子',
|
|
|
+ jiage: '¥ 359.00',
|
|
|
+ xiaol: '128'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.listdata = this.listdata.concat(list2)
|
|
|
+ console.log(this.listdata)
|
|
|
+ },
|
|
|
+ xiugaiFun() {
|
|
|
+ this.xianshi = false;
|
|
|
+ },
|
|
|
+ gengmore() {
|
|
|
+ this.randouh()
|
|
|
+ },
|
|
|
+ goCollect() {
|
|
|
+ console.log('收藏');
|
|
|
+ },
|
|
|
+ goBar() {
|
|
|
+ console.log('购物车');
|
|
|
+ },
|
|
|
+ goBuy() {
|
|
|
+ console.log('购买');
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ /deep/ .tm-menubars .body {
|
|
|
+ background-color: #1b1b1b !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .del_title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 0 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sale_price {
|
|
|
+ color: #0E68CF;
|
|
|
+ margin-right: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .de_tag {
|
|
|
+ border-radius: 20px;
|
|
|
+ background: rgba(156, 156, 156, 0.3);
|
|
|
+ padding: 5px 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .original_price {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #ababab;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .zhuti {
|
|
|
+ padding: 0px 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .kuang {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .round-4 {
|
|
|
+ border-radius: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kuang .line_bottom {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 2px solid rgba(129, 129, 129, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .line_my {
|
|
|
+ margin: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .qiehuan1 .text-primary {
|
|
|
+ color: white !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .touxiang {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai image {
|
|
|
+ width: 18px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai text {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .xiugai {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .you {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ width: 88%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .grey-darken-5 {
|
|
|
+ background-color: #0d0d0d !important;
|
|
|
+ padding: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .text-red {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan .active {
|
|
|
+ background-color: #AAAAAA !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan .tm-poups .grey-darken-5 {
|
|
|
+ background-color: gray !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .tan uni-input {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .you .border-grey-darken-4-b-1 {
|
|
|
+ border-bottom: solid 1px #313131 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yiguicla image {
|
|
|
+ width: 95%;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yiguicla {
|
|
|
+ width: 30%;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sao {
|
|
|
+ width: 88%;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .mx-32 {
|
|
|
+ margin: 0px !important;
|
|
|
+ margin-top: 15px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom_btn {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ position: fixed;
|
|
|
+ font-size: 15px;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .btn_col,
|
|
|
+ .btn_gouwu,
|
|
|
+ .btn_buy {
|
|
|
+ height: 100%;
|
|
|
+ width: 33.3%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dingwei {
|
|
|
+ width: 21%;
|
|
|
+ margin-top: 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contone {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .remenzan {
|
|
|
+ width: 18px !important;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more image {
|
|
|
+ margin-right: 10px;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .biaoqian{
|
|
|
+ background: #303440;
|
|
|
+ padding: 4px 15px;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+</style>
|