吉鹏 / gulu-vue

Download as
Browse Code »

Commit 435c08bd8b7c46dcb68de75a911c4e88cd36b847

Authored by BigBoss
1 parent 026545fd85
Exists in master

新增订单详情页面

Showing 22 changed files with 936 additions and 5 deletions   Show diff stats
1 1 {
2 2 "pages": [
3   - {
4   - "path" : "pages/confirmOrder/confirmOrder",
5   - "style" : {
6   - "navigationBarTitleText": "确认订单"}
7   - },
8 3 {
9 4 "path": "pages/index/index",
10 5 "style": {
... ... @@ -12,6 +7,11 @@
12 7 // "enablePullDownRefresh":true
13 8 }
14 9 },
  10 + {
  11 + "path" : "pages/confirmOrder/confirmOrder",
  12 + "style" : {
  13 + "navigationBarTitleText": "确认订单"}
  14 + },
15 15 {
16 16 "path": "pages/cart/cart",
17 17 "style": {
... ... @@ -23,6 +23,12 @@
23 23 "style": {
24 24 "navigationBarTitleText": "我的"
25 25 }
  26 + },
  27 + {
  28 + "path": "pages/details-3/details-3"
  29 + },
  30 + {
  31 + "path": "pages/detail/detail"
26 32 }
27 33 ],
28 34 "globalStyle": {
... ...
src/pages/addArddess/addArddess.vue
Diff comments   View file @435c08b
... ... @@ -0,0 +1,22 @@
  1 +<template>
  2 + <view class="wrap">
  3 + <view class="content">
  4 +
  5 + </view>
  6 + <view class="button">保存并使用</view>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 + export default {
  12 + data() {
  13 + return {
  14 +
  15 + };
  16 + }
  17 + }
  18 +</script>
  19 +
  20 +<style lang="scss">
  21 +
  22 +</style>
... ...
src/pages/detail/detail.vue
Diff comments   View file @435c08b
... ... @@ -0,0 +1,419 @@
  1 +<template>
  2 + <view class="container">
  3 + <view class="D1">
  4 + <!-- 轮播图 -->
  5 + <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
  6 + <swiper-item v-for="(item,index) in sliding" :key="index">
  7 + <view class="swiper-item ">
  8 + <image :src="item.img" mode="widthFix" class="width100"></image>
  9 + </view>
  10 + </swiper-item>
  11 + </swiper>
  12 + <view class="D1_price">￥{{price}}</view>
  13 + <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
  14 + <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
  15 + </view>
  16 + <view class="D2">
  17 + <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
  18 + <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
  19 + <view><span class="D2_span1">折射率：</span><span class="D2_span2">{{introduction.rate}}</span></view>
  20 + </view>
  21 + <view class="D3">
  22 + <view class="D3_header">
  23 + <view>商品保障</view>
  24 + <view>规格参数</view>
  25 + <view>售后保障</view>
  26 + </view>
  27 + <view class="D3_list">
  28 + <view v-for="(item) in parameter" :key="item.key">
  29 + <image class="D3_image" v-bind:src = "item.img"></image>
  30 + <span>{{item.standard}}</span>
  31 + <span>{{item.slength}}</span>
  32 + </view>
  33 + </view>
  34 + </view>
  35 + <view class="D4">
  36 + <view class="D4_esvalue">
  37 + <view>{{esvalue}}</view>
  38 + <view class="D4_2"></view>
  39 + </view>
  40 + <view class="D4_list">
  41 + <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
  42 + </view>
  43 + </view>
  44 + <view class="D5">
  45 + <view class="D5_fixed1">
  46 + <image src="/static/img/detail/hr.png"></image>
  47 + <view>商品详细</view>
  48 + <image src="/static/img/detail/hr.png"></image>
  49 + </view>
  50 + <view class="D5_all">
  51 + <image v-bind:src="imgAll"></image>
  52 + </view>
  53 + <view class="D5_photoes">
  54 + <view class="D5_photoes1">
  55 + <view v-for="(photoes) in photoes" :key="photoes.value">
  56 + <image v-bind:src = "photoes.img"></image>
  57 + <view>{{photoes.value}}</view>
  58 + </view>
  59 + </view>
  60 + <view class="D5_logo1">帕森防蓝光镜片</view>
  61 + <view class="D5_logo2">健康护眼，我们是认真的！</view>
  62 + <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
  63 + </view>
  64 + </view>
  65 + <view class="D6">
  66 + <view class="D6_v1">CHARM DETAIL</view>
  67 + <view class="D6_v2">细节展示</view>
  68 + <view ><image v-bind:src="imgDetail"></image></view>
  69 + <view>........................................................................</view>
  70 + <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
  71 + </view>
  72 +
  73 + <!-- 底部菜单 -->
  74 + <view class="botton">
  75 + <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
  76 + <view class="botton_2">
  77 + <view class="botton_input">加入购物车</view>
  78 + <view class="botton_now" @click="goConfirmOder">立即购买</view>
  79 + </view>
  80 + </view>
  81 + </view>
  82 +</template>
  83 +
  84 +<script>
  85 +export default {
  86 + data(){
  87 + return {
  88 + name:'商品名称',
  89 + price: 120,
  90 + number: 391,
  91 + sliding:[
  92 + {img:'/static/img/detail/d1.png'},
  93 + {img:'/static/img/detail/d1.png'},
  94 + {img:'/static/img/detail/d1.png'},
  95 + {img:'/static/img/detail/d1.png'}
  96 + ],
  97 + parameter:[
  98 + {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
  99 + {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
  100 + {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
  101 + {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
  102 + {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
  103 + {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
  104 + ],
  105 + assess:[
  106 + {key: 0, Iassess: '价格实惠'},
  107 + {key: 1, Iassess: '美观大方'},
  108 + {key: 2, Iassess: '易搭配'}
  109 + ],
  110 + esvalue:'宝贝好评率 100%',
  111 + introduction:{
  112 + material:'钛合金',
  113 + func:'抗疲劳/防辐射',
  114 + rate: 1.6
  115 + },
  116 + imgAll:'/static/img/detail/d8.png' ,
  117 + photoes:[
  118 + {value:'日常办公', img:'/static/img/detail/d9.png'},
  119 + {value:'上网', img:'/static/img/detail/d10.png'},
  120 + {value:'追剧', img:'/static/img/detail/d11.png'},
  121 + {value:'玩游戏', img:'/static/img/detail/d12.png'},
  122 + ],
  123 + imgDetail:'/static/img/detail/d13.png',
  124 + imgShop:{
  125 + img:'/static/tab-cart.png',
  126 + IsShown: false
  127 + }
  128 + }
  129 + },
  130 + methods:{
  131 + goConfirmOder(){
  132 + uni.navigateTo({
  133 + url: '../confirmOrder/confirmOrder',
  134 + success: res => {},
  135 + fail: () => {},
  136 + complete: () => {}
  137 + });
  138 + }
  139 + }
  140 +}
  141 +</script>
  142 +<style lang='scss'>
  143 + .container{
  144 + background-color:#f8f8f8 ;
  145 + }
  146 + .D1,.D2,.D3,.D4,.D6{
  147 + background: #ffffff;
  148 + margin-bottom: 10px;
  149 + padding:8px 20px 8px 20px;
  150 + box-sizing: border-box;
  151 +
  152 + }
  153 + .D5{
  154 + background: #ffffff;
  155 + padding:8px 20px 8px 20px;
  156 + box-sizing: border-box;
  157 + }
  158 + .swiper{
  159 + width: 100%;
  160 + height: 560rpx;
  161 + .swiper-item{
  162 + width: 100%;
  163 + image{
  164 + width: 100%;
  165 + }
  166 + }
  167 + }
  168 + .D1{
  169 + .D1_price{
  170 + color: #EB5D3B;
  171 + font-size: 18px;
  172 + margin-top: 5px;
  173 + font-family: 'PingFangSC-Semibold';
  174 + }
  175 + .D1_name{
  176 + font-size: 16px;
  177 + font-family: 'PingFangSC-Semibold';
  178 + margin-top: 5px;
  179 + display: flex;
  180 + justify-content: space-between;
  181 + .D1_name1{
  182 + font-weight: bold;
  183 + }
  184 + .D1_number{
  185 + color: #999999 ;
  186 + font-size: 14px;
  187 + font-family: 'PingFangSC-Regular';
  188 + }
  189 + }
  190 + .D1_spans{
  191 + font-size: 10px;
  192 + color:#999999;
  193 + margin-top: 5px;
  194 + span{
  195 + height: 14px;
  196 + margin-right: 10px;
  197 + }
  198 + }
  199 +
  200 + }
  201 + .D2{
  202 + font-size: 14px;
  203 + font-family: 'PingFangSC-Regular';
  204 + view{
  205 + height: 24px;
  206 + }
  207 + .D2_span1{
  208 + color: #999999;
  209 + }
  210 + .D2_span2{
  211 + color: #333333;
  212 + }
  213 + }
  214 + .D3{
  215 + font-size: 14px;
  216 + color: #333333;
  217 + .D3_header{
  218 + display: flex;
  219 + justify-content: space-between;
  220 + font-family: 'PingFangSC-Medium';
  221 + font-weight: bold;
  222 + margin-bottom: 14px;
  223 + view{
  224 + margin-right: 10px;
  225 + }
  226 + }
  227 + .D3_list{
  228 + margin-bottom: 4px;
  229 + }
  230 + .D3_list view{
  231 + display: flex;
  232 + align-content: center;
  233 + }
  234 + .D3_list image{
  235 + width: 50px;
  236 + height: 25px;
  237 + margin-right: 6px;
  238 + }
  239 + .D3_list span{
  240 + margin-left: 6px;
  241 + margin-right: 5px;
  242 + font-family: 'PingFangSC-Regular';
  243 + }
  244 + }
  245 + .D4{
  246 + .D4_esvalue{
  247 + display: flex;
  248 + justify-content: space-between;
  249 + margin-bottom: 10px;
  250 + .D4_2{
  251 + width: 90px;
  252 + border: #333333 ridge;
  253 + }
  254 + }
  255 + .D4_esvalue view{
  256 + font-size: 14px;
  257 + color: #333333;
  258 + font-weight: bold;
  259 + }
  260 + .D4_list view{
  261 + display: inline-block;
  262 + font-size: 12px;
  263 + text-align: center;
  264 + margin-right: 12px;
  265 + width: 90px;
  266 + height: 24px;
  267 + line-height: 24px;
  268 + background: #F2F2F2;
  269 + color: #666666 ;
  270 + }
  271 + }
  272 + .D5{
  273 + .D5_fixed1{
  274 + display: flex;
  275 + justify-content: space-between;
  276 + align-content: center;
  277 + margin-bottom: 12px;
  278 + view{
  279 + font-size: 14px;
  280 + color: #333333;
  281 + font-weight: bold;
  282 + font-family: 'PingFangSC-Medium';
  283 + line-height: 24px;
  284 + }
  285 + image{
  286 + width: 240rpx;
  287 + height: 3px;
  288 + margin-top: 10px;
  289 + }
  290 + }
  291 + .D5_all {
  292 + width: 100%;
  293 + height: 380px;
  294 + margin-bottom: 30px;
  295 + font-family: 'PingFangSC-Regular';
  296 + border: #999999 solid 1.5px;
  297 + image{
  298 + width: 100%;
  299 + height: 380px;
  300 + }}
  301 + .D5_photoes1{
  302 + display: grid;
  303 + grid-template-columns: 48% 48%;
  304 + grid-row-gap: 10px;
  305 + grid-column-gap: 4%;
  306 + image{
  307 + width: 100%;
  308 + height: 70px;
  309 + }
  310 + view{
  311 + width: 100%;
  312 + font-size: 14px;
  313 + text-align: center;
  314 + background: #949494;
  315 + font-family: 'PingFangSC-Regular';
  316 + color: #ffffff;
  317 + view{
  318 + height: 24px;
  319 + line-height: 24px;
  320 + }
  321 + }
  322 + }
  323 + .D5_logo1,.D5_logo2{
  324 + text-align: center;
  325 + }
  326 + .D5_logo1{
  327 + margin-top: 40px;
  328 + font-size: 24px;
  329 + font-weight: bold;
  330 + font-family: 'PingFangSC-Semibold';
  331 + }
  332 + .D5_logo2{
  333 + font-size: 12px;
  334 + }
  335 + .D5_logo3{
  336 + width: 100%;
  337 + text-align: center;
  338 + image{
  339 + width: 50px;
  340 + height: 24px;
  341 + }
  342 + }
  343 + }
  344 + .D6{
  345 + width: 100%;
  346 + height: 430px;
  347 + background: #F9F6ED;
  348 + margin-bottom: 48rpx;
  349 + view{
  350 + text-align: center;
  351 + }
  352 + .D6_v1{
  353 + font-weight: bold;
  354 + }
  355 + .D6_v2{
  356 + font-size: 14px;
  357 + margin-bottom: 30px;
  358 + }
  359 + .D6_v5{
  360 + .D6_v5_s1{
  361 + font-weight: bold;
  362 + }
  363 + .D6_v5_s2{
  364 + font-size: 14px;
  365 + }
  366 + }
  367 + }
  368 + .botton{
  369 + position: fixed;
  370 + bottom: 0;
  371 + height: 74px;
  372 + width: 100%;
  373 + background: #FFFFFF;
  374 + padding: 20px 20px 8px 20px;
  375 + font-family: 'PingFangSC-Regular';
  376 + box-sizing: border-box;
  377 + display: flex;
  378 + justify-content: space-between;
  379 + align-content: center;
  380 + .botton_1{
  381 + width: 20%;
  382 + height: 100%;
  383 + text-align: center;
  384 + color: #989898;
  385 + }
  386 + image{
  387 + width: 60%;
  388 + height: 30px;
  389 + }
  390 + .botton_image{
  391 + font-size: 12px;
  392 + text-align: center;
  393 + }
  394 + .botton_2{
  395 + width: 74%;
  396 + height: 86%;
  397 + display: grid;
  398 + grid-template-columns: 50% 50%;
  399 + }
  400 + .botton_input{
  401 + display: inline-flex;
  402 + align-items: center;
  403 + justify-content: space-around;
  404 + background: #FFF0EC;
  405 + font-size: 16px;
  406 + color: #FF6B4A;
  407 + border-radius: 20px 0 0 20px;
  408 + }
  409 + .botton_now{
  410 + display: inline-flex;
  411 + align-items: center;
  412 + justify-content: space-around;
  413 + background: #FF6B4A;
  414 + font-size: 16px;
  415 + color: #FFFFFF;
  416 + border-radius:0 20px 20px 0;
  417 + }
  418 + }
  419 +</style>
0 420 \ No newline at end of file
... ...
src/pages/details-3/details-3.vue
Diff comments   View file @435c08b
... ... @@ -0,0 +1,478 @@
  1 +<template>
  2 + <view class="content">
  3 + <view class="header">
  4 + <view class="header-name">
  5 + <navigator open-type="navigateBack" hover-class="navigator-hover">
  6 + <image src="/static/back.png"></image>
  7 + </navigator>
  8 + <text>{{name}}</text>
  9 + </view>
  10 + </view>
  11 + <scroll-view scroll-y class="sroll-view">
  12 + <view class="goods-details">
  13 + <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
  14 + <swiper-item v-for="(item) in infos" :key="item.goods_id">
  15 + <image :src="item.img" mode="scaleToFill"></image>
  16 + </swiper-item>
  17 + </swiper>
  18 + <view class="goods-price">
  19 + <text class="now-price">￥120</text>
  20 + <text class="old-price">￥198</text>
  21 + <text class="buy-num">349人购买过</text>
  22 + </view>
  23 + <view class="goods-name">
  24 + <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
  25 + </view>
  26 + <view class="goods-courier">
  27 + <text>支持7天无理由退货</text>
  28 + <text class="courier-support">顺丰发货</text>
  29 + </view>
  30 + </view>
  31 + <view class="goods-form">
  32 + <text class="p1">填写验光数据</text>
  33 + <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
  34 + <view class="choice-use">
  35 + <text class="p3">您一般用眼镜:</text>
  36 + <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
  37 + <text class="p4">阅读</text>
  38 + <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>
  39 + <text class="p5">看远处</text>
  40 + </view>
  41 + <view class="picker" >
  42 + <view class="picker-choice">
  43 + <view class="choice-left">
  44 + <text class="p11">{{pickerInfoList[0].nameC}}</text>
  45 + <text class="p12">{{pickerInfoList[0].nameE}}</text>
  46 + </view>
  47 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  48 + <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
  49 + <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
  50 + <image src="../../static/detail-tabicon.png" ></image>
  51 + </picker>
  52 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  53 + <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
  54 + <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
  55 + <image src="../../static/detail-tabicon.png" ></image>
  56 + </picker>
  57 + </view>
  58 + </view>
  59 + <view class="picker" >
  60 + <view class="picker-choice">
  61 + <view class="choice-left">
  62 + <text class="p11">{{pickerInfoList[1].nameC}}</text>
  63 + <text class="p12">{{pickerInfoList[1].nameE}}</text>
  64 + </view>
  65 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  66 + <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
  67 + <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
  68 + <image src="../../static/detail-tabicon.png" ></image>
  69 + </picker>
  70 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  71 + <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
  72 + <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
  73 + <image src="../../static/detail-tabicon.png" ></image>
  74 + </picker>
  75 + </view>
  76 + </view>
  77 + <view class="picker" >
  78 + <view class="picker-choice">
  79 + <view class="choice-left">
  80 + <text class="p11">{{pickerInfoList[2].nameC}}</text>
  81 + <text class="p12">{{pickerInfoList[2].nameE}}</text>
  82 + </view>
  83 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  84 + <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
  85 + <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
  86 + <image src="../../static/detail-tabicon.png" ></image>
  87 + </picker>
  88 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  89 + <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
  90 + <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
  91 + <image src="../../static/detail-tabicon.png" ></image>
  92 + </picker>
  93 + </view>
  94 + </view>
  95 + <view class="picker" >
  96 + <view class="picker-choice">
  97 + <view class="choice-left">
  98 + <text class="p11">{{pickerInfoList[3].nameC}}</text>
  99 + <text class="p12">{{pickerInfoList[3].nameE}}</text>
  100 + </view>
  101 + <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
  102 + <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
  103 + <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
  104 + <image src="../../static/detail-tabicon.png" ></image>
  105 + </picker>
  106 + <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
  107 + <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
  108 + <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
  109 + <image src="../../static/detail-tabicon.png" ></image>
  110 + </picker>
  111 + </view>
  112 + </view>
  113 + <view class="picker" >
  114 + <view class="picker-choice">
  115 + <view class="choice-left">
  116 + <text class="p11">{{pickerInfoList[4].nameC}}</text>
  117 + </view>
  118 + <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
  119 + <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
  120 + <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
  121 + <image src="../../static/detail-tabicon.png" ></image>
  122 + </picker>
  123 + <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
  124 + <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
  125 + <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
  126 + <image src="../../static/detail-tabicon.png" ></image>
  127 + </picker>
  128 + <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
  129 + <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
  130 + <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
  131 + <image src="../../static/detail-tabicon.png" ></image>
  132 + </picker>
  133 + </view>
  134 + </view>
  135 + <view class="confirm">
  136 + <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
  137 + <text>确认以上输入信息来源于我的验光数据!</text>
  138 + </view>
  139 + </view>
  140 + </scroll-view>
  141 + <view class="goods-submit">
  142 + <button>下一步</button>
  143 + </view>
  144 + </view>
  145 +</template>
  146 +
  147 +<script>
  148 +
  149 + export default {
  150 + components: {
  151 +
  152 + },
  153 + data() {
  154 + return {
  155 + name: '眼镜名称名称',
  156 + infos: [
  157 + { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  158 + { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  159 + { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  160 + { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
  161 + ],
  162 + tablist: {
  163 + read: true,
  164 + seeLong: false,
  165 + confirm: false
  166 + },
  167 + tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
  168 + // 度数相关数据
  169 + pickerInfoList:[
  170 + {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
  171 + {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
  172 + {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
  173 + {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
  174 + {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
  175 + ],
  176 + }
  177 + },
  178 + onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
  179 +
  180 + },
  181 + methods: {
  182 + changeRead() {
  183 + this.tablist.read = !this.tablist.read
  184 + // this.current = e.detail.current;
  185 + },
  186 + changeSeeLong() {
  187 + this.tablist.seeLong = !this.tablist.seeLong
  188 + },
  189 + changeConfirm() {
  190 + this.tablist.confirm = !this.tablist.confirm
  191 + },
  192 +
  193 + bindPickerChange01: function(e) {
  194 + this.pickerInfoList[0].nameIndex1 = e.target.value
  195 + },
  196 + bindPickerChange02: function(e) {
  197 + this.pickerInfoList[0].nameIndex2 = e.target.value
  198 + },
  199 +
  200 + bindPickerChange11: function(e) {
  201 + this.pickerInfoList[1].nameIndex1 = e.target.value
  202 + },
  203 + bindPickerChange12: function(e) {
  204 + this.pickerInfoList[1].nameIndex2 = e.target.value
  205 + },
  206 +
  207 + bindPickerChange21: function(e) {
  208 + this.pickerInfoList[2].nameIndex1 = e.target.value
  209 + },
  210 + bindPickerChange22: function(e) {
  211 + this.pickerInfoList[2].nameIndex2 = e.target.value
  212 + },
  213 +
  214 + bindPickerChange31: function(e) {
  215 + this.pickerInfoList[3].nameIndex1 = e.target.value
  216 + },
  217 + bindPickerChange32: function(e) {
  218 + this.pickerInfoList[3].nameIndex2 = e.target.value
  219 + },
  220 +
  221 + bindPickerChange41: function(e) {
  222 + this.pickerInfoList[4].nameIndex1 = e.target.value
  223 + },
  224 + bindPickerChange42: function(e) {
  225 + this.pickerInfoList[4].nameIndex2 = e.target.value
  226 + },
  227 + bindPickerChange43: function(e) {
  228 + this.pickerInfoList[4].nameIndex3 = e.target.value
  229 + },
  230 + }
  231 + }
  232 +</script>
  233 +
  234 +<style lang="scss">
  235 + .content {
  236 + display: flex;
  237 + flex-direction: column;
  238 + align-items: center;
  239 + justify-content: center;
  240 +
  241 + }
  242 + .header{
  243 + display: flex;
  244 + flex-direction: column;
  245 + align-items: center;
  246 + background-color: #fff;
  247 + width: 100%;
  248 + height: 64rpx;
  249 + z-index: 999;
  250 + position: fixed;
  251 + top: 0;
  252 + .header-name {
  253 + display: flex;
  254 + width: 684rpx;
  255 + text {
  256 + font-size: 36rpx;
  257 + color: #333333;
  258 + letter-spacing: -0.34px;
  259 + margin-left: 54rpx;
  260 + }
  261 + image {
  262 + width: 11px;
  263 + height: 18px;
  264 + border-radius: 16px;
  265 + }
  266 + }
  267 +
  268 + }
  269 +
  270 + .sroll-view{
  271 + height: 1760rpx;
  272 + }
  273 +
  274 + .goods-details{
  275 + display: flex;
  276 + flex-direction: column;
  277 + align-items: center;
  278 + justify-content: center;
  279 + background-color: #fff;
  280 + margin-bottom: 40rpx;
  281 + .swiper {
  282 + width: 684rpx;
  283 + height: 512rpx;
  284 + image {
  285 + width: 100%;
  286 + height: 100%;
  287 + border-radius: 16rpx;
  288 + }
  289 + }
  290 + .goods-price {
  291 + display: flex;
  292 + justify-content: space-between;
  293 + padding: 40rpx 0 30rpx 0;
  294 + align-items: center;
  295 + width: 684rpx;
  296 + .now-price {
  297 + font-size: 18px;
  298 + color: #EB5D3B;
  299 + }
  300 + .old-price {
  301 + font-size: 14px;
  302 + color: #999999;
  303 + letter-spacing: -0.26px;
  304 + margin-left: -156px;
  305 + text-decoration: line-through;
  306 + }
  307 + .buy-num {
  308 + font-size: 14px;
  309 + color: #999999;
  310 + letter-spacing: -0.26px;
  311 + text-align: justify;
  312 + }
  313 + }
  314 + .goods-name {
  315 + font-size: 16px;
  316 + color: #333333;
  317 + letter-spacing: -0.3px;
  318 + text-align: justify;
  319 + width: 684rpx;
  320 + }
  321 + .goods-courier {
  322 + width: 684rpx;
  323 + font-size: 10px;
  324 + color: #999999;
  325 + letter-spacing: -0.19px;
  326 + padding: 10rpx 0;
  327 + .courier-support {
  328 + padding-left: 20rpx;
  329 + }
  330 + }
  331 +
  332 + }
  333 + .goods-form {
  334 + display: flex;
  335 + flex-direction: column;
  336 + align-items: center;
  337 + justify-content: center;
  338 + background-color: #fff;
  339 + width: 100%;
  340 + .choice-use{
  341 + display: flex;
  342 + margin-bottom: 40rpx;
  343 + width: 684rpx;
  344 + align-items: center;
  345 + .p3 {
  346 + font-size: 14px;
  347 + color: #333333;
  348 + letter-spacing: -0.26px;
  349 + text-align: justify;
  350 + line-height: 24px;
  351 + width: 164px;
  352 + }
  353 + .p4 {
  354 + font-size: 14px;
  355 + color: #666666;
  356 + letter-spacing: -0.26px;
  357 + margin: 0 71rpx 0 24rpx ;
  358 + }
  359 + .p5 {
  360 + font-size: 14px;
  361 + color: #666666;
  362 + letter-spacing: -0.26px;
  363 + margin-left: 24rpx;
  364 + }
  365 + }
  366 + .p1 {
  367 + font-size: 16px;
  368 + color: #333333;
  369 + letter-spacing: -0.3px;
  370 + text-align: justify;
  371 + line-height: 24px;
  372 + margin: 4px 0;
  373 +
  374 + }
  375 + .p2 {
  376 + font-size: 12px;
  377 + color: #999999;
  378 + letter-spacing: -0.23px;
  379 + margin-bottom: 18rpx;
  380 + }
  381 + image{
  382 + width: 28rpx;
  383 + height: 26rpx;
  384 + }
  385 + .confirm {
  386 + display: flex;
  387 + align-items: center;
  388 + font-size: 12px;
  389 + color: #666666;
  390 + letter-spacing: -0.23px;
  391 + width: 684rpx;
  392 + image{
  393 + margin-right:25rpx;
  394 + }
  395 + }
  396 + .picker{
  397 + display: flex;
  398 + flex-direction: column;
  399 + justify-content: center;
  400 + align-items: center;
  401 + width: 100%;
  402 + image{
  403 + width: 10px;
  404 + height: 10px;
  405 + margin-right: 5px;
  406 + }
  407 + .picker-choice{
  408 + display: flex;
  409 + width: 684rpx;
  410 + align-items: center;
  411 + margin-bottom: 40rpx;
  412 + .choice-left{
  413 + width: 210rpx;
  414 + .p11 {
  415 + font-size: 14px;
  416 + color: #333333;
  417 + letter-spacing: -0.26px;
  418 + text-align: justify;
  419 + line-height: 24px;
  420 + margin-right: 10px;
  421 + }
  422 + .p12 {
  423 + font-size: 10px;
  424 + color: #3F3F3F;
  425 + letter-spacing: -0.19px;
  426 + text-align: justify;
  427 + line-height: 24px;
  428 + }
  429 +
  430 +
  431 + }
  432 + .p13 {
  433 + font-size: 10px;
  434 + color: #999999;
  435 + letter-spacing: -0.19px;
  436 + margin-right: 10px;
  437 + }
  438 + .p13-date {
  439 + font-size: 10px;
  440 + color: #999999;
  441 + letter-spacing: -0.19px;
  442 + margin-right: 5px;
  443 + }
  444 + .p14 {
  445 + font-size: 14px;
  446 + color: #666666;
  447 + letter-spacing: -0.26px;
  448 + text-align: center;
  449 + width: 124rpx;
  450 + border-bottom: 1px solid #CFCFCF;
  451 + }
  452 +
  453 + }
  454 + }
  455 + }
  456 + .goods-submit{
  457 + display: flex;
  458 + flex-direction: column;
  459 + align-items: center;
  460 + justify-content: center;
  461 + position: fixed;
  462 + bottom: 0;
  463 + z-index: 999;
  464 + width: 100%;
  465 + height: 120rpx;
  466 + background-color: #fff;
  467 + button{
  468 + width: 540rpx;
  469 + height: 80rpx;
  470 + font-size: 32rpx;
  471 + color: #fff;
  472 + background: #FF6B4A;
  473 + border-radius: 20px;
  474 + border-radius: 20px;
  475 + }
  476 + }
  477 +
  478 +</style>
0 479 \ No newline at end of file
... ...
src/pages/index/index.vue
Diff comments   View file @435c08b
... ... @@ -153,6 +153,12 @@
153 153 },
154 154 toGoods(id){
155 155 console.log(id)
  156 + uni.navigateTo({
  157 + url: `../detail/detail?oderId=1`,
  158 + success: res => {},
  159 + fail: () => {},
  160 + complete: () => {}
  161 + });
156 162 }
157 163 },
158 164 onNavigationBarButtonTap(e) {
... ...
src/static/img/detail/d1.png
Diff comments   View file @435c08b

170 KB
src/static/img/detail/d10.png
Diff comments   View file @435c08b

53.8 KB
src/static/img/detail/d11.png
Diff comments   View file @435c08b

52.9 KB
src/static/img/detail/d12.png
Diff comments   View file @435c08b

42.1 KB
src/static/img/detail/d13.png
Diff comments   View file @435c08b

46.4 KB
src/static/img/detail/d2.png
Diff comments   View file @435c08b

4.45 KB
src/static/img/detail/d3.png
Diff comments   View file @435c08b

3.95 KB
src/static/img/detail/d4.png
Diff comments   View file @435c08b

4.02 KB
src/static/img/detail/d5.png
Diff comments   View file @435c08b

3.96 KB
src/static/img/detail/d6.png
Diff comments   View file @435c08b

4.21 KB
src/static/img/detail/d7.png
Diff comments   View file @435c08b

3.93 KB
src/static/img/detail/d8.png
Diff comments   View file @435c08b

252 KB
src/static/img/detail/d9.png
Diff comments   View file @435c08b

51.7 KB
src/static/img/detail/d_star.png
Diff comments   View file @435c08b

3.94 KB
src/static/img/detail/hr.png
Diff comments   View file @435c08b

260 Bytes
src/static/img/detail/logo.png
Diff comments   View file @435c08b

469 Bytes
src/static/img/detail/shop.png
Diff comments   View file @435c08b

1018 Bytes