|
|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <view class="goods">
|
|
|
+ <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay">
|
|
|
+ <swiper-item v-for="(item,index) in dataInfo.pics" :key="index">
|
|
|
+ <image class="swiper-image" :src="item" mode=""></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="goods-bos">
|
|
|
+ <view class="name">{{dataInfo.name || ''}}</view>
|
|
|
+ <view class="money">
|
|
|
+ <text style="font-size: 20rpx;margin-right: 10rpx;">¥</text>
|
|
|
+ <text v-if="dataInfo.money">{{dataInfo.money}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="title-bos">
|
|
|
+ <view class="border"></view>
|
|
|
+ <view style="margin: 0 30rpx;">图文介绍</view>
|
|
|
+ <view class="border"></view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <rich-text :nodes="dataInfo.body"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 120rpx;"></view>
|
|
|
+ <view class="goods-bnt">
|
|
|
+ <view class="bnt" @click="submit">联系我们</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ onMounted,
|
|
|
+ unref,
|
|
|
+ computed,
|
|
|
+ watch
|
|
|
+ } from 'vue';
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReady
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+
|
|
|
+ const listgoods = ref(
|
|
|
+ [{
|
|
|
+ pics: [
|
|
|
+ 'https://img13.360buyimg.com/pcpubliccms/jfs/t1/311461/32/1002/135580/68257980F8aaf636f/ae851f75de6f780b.jpg.avif'
|
|
|
+ ],
|
|
|
+ name: '英雄(HERO)【新年礼物】钢笔 382商务办公学生日常书写铱金签字墨水礼盒装 黑色明尖',
|
|
|
+ money: '59.00',
|
|
|
+ body: "<img style='width: 80%;' src='https://img30.360buyimg.com/sku/jfs/t1/291314/20/2530/84305/6819c4c1Ff559fff8/9bad62486e9ab7f1.jpg.avif' alt='' />"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pics: [
|
|
|
+ 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/235865/8/9679/129991/658bb2a5F0800a0c3/b844166dee370361.jpg.avif'
|
|
|
+ ],
|
|
|
+ name: '法拉蒙笔记本本子A5加厚记事本商务羊巴皮面复古笔记本文具工作日记本会议记录本办公文具可',
|
|
|
+ money: '8.50',
|
|
|
+ body: "<img style='width: 80%;' src='https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/382485/10/4148/60242/6948dbc1F414e596d/57bd86d962d81a4c.jpg.avif' alt='' />"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pics: [
|
|
|
+ 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/101458/36/44450/126805/64effce2Fddbe98e2/8156dc6f322774fe.jpg.avif'
|
|
|
+ ],
|
|
|
+ name: 'ujia 国潮笔记本子礼盒套装故宫国风文创记事本伴手礼教师节礼物送老师企业可定制 两件套礼盒',
|
|
|
+ money: '80.00',
|
|
|
+ body: "<img style='width: 80%;' src='https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/86893/20/41375/99189/64cb22daF615c285a/a8e94fc19663f41f.jpg.avif' alt='' />"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pics: [
|
|
|
+ 'https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/253778/26/26667/91830/67c12cffFba1bcd79/2d2111f16c6d867c.jpg.avif'
|
|
|
+ ],
|
|
|
+ name: '晨光(M&G)文具 故宫金榜题名学生文具礼盒套装15件套 中性笔钢笔涂卡铅笔考试送礼HAGP1694马年礼礼盒',
|
|
|
+ money: '99.00',
|
|
|
+ body: "<img style='width: 80%;' src='https://img10.360buyimg.com/pcpubliccms/s1440x1440_jfs/t1/100556/14/30048/134138/6296fc94E6127f554/924cbf870371929c.jpg.avif' alt='' />"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+
|
|
|
+ const id = ref(null)
|
|
|
+ const dataInfo = ref({
|
|
|
+ pics: [],
|
|
|
+ money: ''
|
|
|
+ })
|
|
|
+ const indicatorDots = ref(true)
|
|
|
+ const autoplay = ref(true)
|
|
|
+ const number = ref(1)
|
|
|
+ onLoad((res) => {
|
|
|
+ dataInfo.value = listgoods.value[res.id]
|
|
|
+ console.log(dataInfo.value, '?????????')
|
|
|
+ id.value = res.id
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const submit = () => {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: '13429886783', // 必填,电话号码(字符串格式)
|
|
|
+ success: function () {
|
|
|
+ console.log('拨号成功');
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ console.error('拨号失败', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // uni.showModal({
|
|
|
+ // title: '门店地址',
|
|
|
+ // confirmText: '知道了',
|
|
|
+ // confirmColor: '#B38E58',
|
|
|
+ // showCancel: false,
|
|
|
+ // content: '湖北省武汉市武昌市中南路521号',
|
|
|
+ // success: function(res) {
|
|
|
+ // if (res.confirm) {}
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+
|
|
|
+ const goHome = () => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .goods {
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-image {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-bos {
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 750rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222A42;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ padding: 20rpx 30rpx 10rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #B38E58;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 750rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-bos {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background-color: #D6D6D6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-bnt {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ width: 750rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 50rpx;
|
|
|
+ padding-right: 50rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .home {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #969696;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 48rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bnt {
|
|
|
+ width: 354rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(90deg, #EBCA9D 0%, #CFAB7A 100%);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|